Question

我找到了错误的来源，但不知道如何解决它。我正在使用codeigniter，我正在尝试创建一个文本框，其中显示搜索结果，以帮助用户找到他们正在寻找的内容。想想类似谷歌的搜索。当我进行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）。

基于AJAX的搜索返回页面信息

1 个答案: