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

Question

我找到了錯誤的根源，但不知道如何解決。 我正在使用codeigniter，並且試圖制作一個文本框，在其下方顯示搜索結果，以幫助用戶找到所需的內容。 認為類似於Google的搜索。 當我撥打AJAX時，它會返回網頁上的所有內容以及搜索結果。

問題示例： https ： //gyazo.com/244ae8f3835233a2690512cebd65876d

div中的文本框不應該有空格。 通過使用inspect元素，我意識到空格是我指向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此圖顯示了控制台，以及響應和響應文本如何構成整個頁面，而不僅僅是結果。

Answer 1

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

您只需刪除$this->view("suggest"); 您的建議將得到回應。

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