Ajax Live Search - Ottieni 2 campi invece di 1

Question

Ho un piccolo problema, voglio una ricerca dal vivo che mi restituisce un POST_TITLE e un POST_ID. il titolo è per le persone da vedere, ma il mio motivo principale è che voglio che POST_ID funzioni con esso.

Qualcuno mi può aiutare, ho postato il codice qui sotto ...

<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); 
?> 

Answer 1

Si dovrebbe restituire i dati da server JSON (o XML, JSON, ma è più facile), e quindi analizzare in Javascript. Mostra titoli per l'utente, id tieni da te.

Answer 2

In generale, xajax potrebbe semplificare molto le cose. Dai un'occhiata alla mia risposta qui:

how to assign a javascript variable to a smarty variable

Answer 3

ho notato nella discussione di cui sopra si sta tornando JSON ora, e l'analisi è dal lato client. E ho notato che hai taggato la tua domanda con jQuery, quindi credo che tu stia usando quello. Questa non è una risposta alla tua domanda, ma qui ci sono alcuni suggerimenti per la codifica javascript con jQuery che ti aiuteranno a semplificare il tuo codice.

• invece di fare le chiamate Ajax utilizzando direttamente l'oggetto XMLHttpRequest, basta usare $ .get (url, successFunction)
• invece di utilizzare getElementById ('un po-id'), utilizzare $ ('# qual- id '), quindi per fare cose come svuotare l'html interno, puoi fare $ (' # some-id '). html (' '). Usando l'elemento jQuery invece di HTMLElement, puoi anche manipolare il DOM in un modo compatibile cross-browser: http://api.jquery.com/category/manipulation/
• invece di creare il tuo javascript nel tuo HTML (tutti quei gestori onmouseover e onmouseout), usa $ ('div.suggest_link ') per selezionare tutti i div sulla pagina che hanno una classe di "suggest_link". Quindi, collega un gestore di eventi live che funzionerà su un html generato dinamicamente, come questo: $ ('div.suggest_link'). Live ('mouseover', handleMouseOverForSuggestLink). Si può leggere di più su questo nella pagina di jQuery: http://api.jquery.com/live/

Tutti questi suggerimenti funzionerà nei browser moderni, e vi aiuterà a ridurre un sacco di codice. In bocca al lupo!