2011-02-07 15 views
5

私は小さな問題を抱えています。私はPOST_TITLEとPOST_IDを返すライブ検索をしたいと思います。タイトルは人々に見えるものですが、私の主な理由はPOST_IDを使って作業したいということです。誰かが私を助けることができる、私は以下のコードを掲載Ajax Live Search - 1の代わりに2つのフィールドを取得

...

<script> 
//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 = escape(document.getElementById('txtSearch').value); 
     searchReq.open("GET", '/wp-content/themes/twentyten/livesearch.php?search=' + str, true); 
     searchReq.onreadystatechange = handleSearchSuggest; 
     searchReq.send(null); 
    }   
} 

//Called when the AJAX response is returned. 
function handleSearchSuggest() { 
    if (searchReq.readyState == 4) { 


      var sx = document.getElementById('restaurantid') 
     sx.innerHTML = ''; 

     var ss = document.getElementById('search_suggest') 
     ss.innerHTML = ''; 
     var str = searchReq.responseText.split("\n"); 
     for(i=0; i < str.length - 1; i++) { 
      //Build our element string. This is cleaner using the DOM, but 
      //IE doesn't support dynamically added attributes. 
      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; 
      ss 
     } 
    } 
} 

//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('restaurantid').value = value; 
    document.getElementById('search_suggest').innerHTML = ''; 
} 
</script> 


<form id="frmSearch" action=""> 
    <input type="text" id="restaurantid" name="restaurantid" style="display: none;" /> 
        <input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" autocomplete="off" /> 
        <input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /> 
        <div id="search_suggest"></div> 
       </form> 
</code> 

livesearch.php - THE AJAX PAGE 

<code> 
<?php 

$con = mysql_connect('x', 'x', 'x); 
if (!$con) 
    { 
    die('Could not connect: ' . mysql_error()); 
    } 

mysql_select_db("xx", $con); 
if (isset($_GET['search']) && $_GET['search'] != '') { 
    //Add slashes to any quotes to avoid SQL problems. 
    $search = addslashes($_GET['search']); 
    //Get every page title for the site. 
    $suggest_query = mysql_query('SELECT * FROM `mrr_posts` WHERE `post_title` LIKE \'%'.$search.'%\' AND `post_status` LIKE \'publish\' LIMIT 0, 30') or trigger_error("Query: $suggest_query\n<br />MySQL Error: " .mysql_error());    
    while ($suggest = mysql_fetch_array($suggest_query, MYSQL_ASSOC)) {  
    //while($suggest = db_fetch_array($suggest_query)) { 
     //Return each page title seperated by a newline. 
     echo $suggest['post_title'] . "\n"; 
    } 
} 





mysql_close($con); 
?> 
+1

+1警告メッセージの場合 – yoda

+0

また、警告の+1 - 私を笑顔にしていただきありがとうございます - あなたの状況に最も適しているようです。がんばろう! – Zydeco

答えて

0

あなたはJSONにサーバからデータを返す必要があります(またはXMLが、JSONは簡単です)、その後、JavaScriptでそれを解析。ユーザーにタイトルを表示し、あなた自身のためにIDを保持します。

+0

はまた、あなたが望む他のフォーマットでそれを返すことができ、あなたのjavascriptでそれを解析することができます。しかし、JSONは間違いなく標準です。 – Prescott

+0

@Prescottあなたが言ったように、それは必須ではありませんが、PHPの 'json_encode'のおかげで最も簡単な解決策です。 – singles

+0

私はこのコードから1-TITLEのようなものを渡すことができますか?それからjavascriptで私はIDからタイトルを爆発させますか? – WilfredMifsud

1

を私はあなたが今、JSONを返すと、クライアント側から、それを解析している上記の議論に気づきました。そして、あなたの質問にjQueryでタグを付けたことに気づいたので、あなたはそれを使っていると思います。これはあなたの質問に対する答えではありませんが、jQueryを使ったJavaScriptコードのヒントは、コードを単純化するのに役立ちます。

  • 代わりに直接XMLHttpRequestオブジェクトを使用して、あなたのAJAX呼び出しを行うので、ちょうど$( '#幾分を使用し、代わりにgetElementByIdを( 'いくつかのIDを')使用しての$に.get(URL、successFunction)
  • を使用id ')、内部HTMLを空にするようなことをするには、$('#some-id ').html(' ')を使うことができます。 HTMLElementの代わりにjQuery要素を使用すると、ブラウザに互換性のある方法でDOMを操作することもできます:http://api.jquery.com/category/manipulation/
  • HTMLにjavascriptを作成する代わりに(onmouseoverハンドラとonmouseoutハンドラ)、$( 'div.suggest_link ')をクリックして、「suggest_link」のクラスを持つページのすべてのdivを選択します。次に、$( 'div.suggest_link')。live( 'mouseover'、handleMouseOverForSuggestLink)のように、動的に生成されたhtmlで動作するライブイベントハンドラをアタッチします。あなたはjQueryのページにこの詳細を読むことができます:http://api.jquery.com/live/

すべてのこれらの提案は、近代的なブラウザで動作し、コードの多くを削減するのに役立ちます。がんばろう!

関連する問題