2017-02-14 17 views
0

エラーの原因は見つかりましたが、修正方法はわかりません。私はcodeigniterを使用しています。検索結果が表示されたテキストボックスを作成して、ユーザーが探しているものを見つけるのを助けようとしています。 Googleの検索と同じように考えてください。 AJAX呼び出しを行うと、Webページ上のすべてと検索結果が返されます。問題の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 この画像は、コンソールと、レスポンスとレスポンスのテキストが結果だけでなくページ全体でどのように表示されるかを示しています。

+0

さてあなたはおそらく必要があります(.PHPの欠落)...それは 'suggest.phpことになっていませんか?' =検索し、間違ったGETリクエストのURLを使用してそしてもちろん、あなたの「suggest.php」していますHTMLマークアップを出力するのではなく、実際にデータベースリクエストを行い、再利用可能なデータ(JSONなど)を返します。 – Connum

+0

@Connum私はそれを変更し、それは別の検索を与えたが、それでも正しいものではありません。それは現在404とcodeigniterに付属のcssを示しています。 – Yunath

+0

私はまだあなたのsuggest.phpが行うことになって、データベースからの提案を取得し、Ajaxのリクエストに戻すあなたのコードがどこにあるか... – Connum

答えて

0

viewメソッドを呼び出すと、おすすめモデルが後のデータをエコーし​​ている間に、ヘッダービュー、推奨ビュー、およびフッタービューが読み込まれます。

あなただけのライン$this->view("suggest");を削除することもできますし、あなたの提案はエコーされます。

これは素晴らしいことではありません。モデルからコントローラにタイトルを戻し、構造化された方法(おそらくJSON)でデータを出力する新しいコントローラメソッドを作成します。

+0

私はその行をコメントアウトしましたが、何も変わっていません。 – Yunath

関連する問題