基於AJAX的搜索返回頁面信息

我發現錯誤的來源，但不知道如何解決它。我正在使用codeigniter，我正在嘗試製作一個帶有搜索結果的文本框，以幫助用戶找到他們正在尋找的內容。認爲類似於谷歌的搜索。當我進行AJAX調用時，它會返回網頁上的所有內容以及搜索結果。問題的基於AJAX的搜索返回頁面信息

例子：https://gyazo.com/244ae8f3835233a2690512cebd65876d

那格內文本不應該存在以及空白。使用檢查元素，我意識到空白是我的CSS和JS頁面的鏈接。然後是我認爲的文本框。

我相信問題在於我的JS。

//Gets the browser specific XmlHttpRequest Object 
function getXmlHttpRequestObject() { 
    if (window.XMLHttpRequest) { 
    return new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
    return new ActiveXObject("Microsoft.XMLHTTP"); 
    } else { 
    alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?"); 
    } 
} 

//Our XmlHttpRequest object to get the auto suggest 
var searchReq = getXmlHttpRequestObject(); 

//Called from keyup on the search textbox. 
//Starts the AJAX request. 
function searchSuggest() { 
    if (searchReq.readyState == 4 || searchReq.readyState == 0) { 
    var str = encodeURI(document.getElementById('txtSearch').value); 
    searchReq.open("GET", '?search=' + str, true); 
    searchReq.onreadystatechange = handleSearchSuggest; 
    searchReq.send(null); 
    } 
} 

//Mouse over function 
function suggestOver(div_value) { 
    div_value.className = 'suggest_link_over'; 
} 
//Mouse out function 
function suggestOut(div_value) { 
    div_value.className = 'suggest_link'; 
} 
//Click function 
function setSearch(value) { 
    document.getElementById('txtSearch').value = value; 
    document.getElementById('search_suggest').innerHTML = ''; 
} 

//Called when the AJAX response is returned. 
function handleSearchSuggest() { 
    if (searchReq.readyState == 4) { 
    var ss = document.getElementById('search_suggest'); 
    ss.innerHTML = ''; 
    var str = searchReq.responseText.split("\n"); 
    for (i = 0; i < str.length - 1; i++) { 
     var suggest = '<div onmouseover="javascript:suggestOver(this);" '; 
     suggest += 'onmouseout="javascript:suggestOut(this);" '; 
     suggest += 'onclick="javascript:setSearch(this.innerHTML);" '; 
     suggest += 'class="suggest_link">' + str[i] + '</div>'; 
     ss.innerHTML += suggest; 
    } 
    } 
}

更具體地說getXmlHttpRequestObject函數。它返回整個頁面，包括我的頁眉和頁腳。我不相信需要更多的信息，但如果有人有這種感覺，我會提供視圖和控制器。

https://gyazo.com/d0c43326191a4b09cc4b1d85d67a1bf6 該圖顯示了控制檯以及響應和響應文本如何成爲整個頁面而不僅僅是結果。

來源

2017-02-14 Yunath

那麼你可能使用了錯誤的GET請求URL然後......它不應該是'suggest.php？search ='（錯過.php）當然，你的'suggest.php'應該實際上做一個數據庫請求並返回一些可重用的數據（例如JSON），而不是僅僅輸出HTML標記。 – Connum

@Connum我改變了這一點，它給了不同的搜索，但仍然不正確。它現在顯示了一個404和帶有codeigniter的css。 – Yunath

我仍然沒有得到你的suggest.php應該做什麼，你的代碼從數據庫中獲取建議並將它們返回給ajax請求的地方是...... – Connum

您對view方法的調用將加載標題視圖，建議視圖和頁腳視圖，而您的建議模型正在回顯您之後的數據。

您可以刪除行$this->view("suggest");，您的建議將得到迴應。

雖然這並不好。我將標題從模型傳遞迴控制器，然後創建一個新的控制器方法，以結構化的方式輸出數據（可能是JSON）。

來源

2017-02-14 15:25:34

我注意到這條線，但沒有任何改變。 – Yunath

基於AJAX的搜索返回頁面信息

回答

相關問題