基于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的搜索返回页面信息

回答

相关问题