Ajax Live Search - Obtener 2 campos en lugar de 1

Question

Tengo un pequeño problema, quiero una búsqueda en vivo que me devuelva un POST_TITLE y un POST_ID. el título es para que la gente lo vea, pero mi razón principal es que quiero que POST_ID trabaje con él.

Puede alguien ayudarme, he publicado el código de abajo ...

<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

Debe devolver datos desde un servidor en JSON (o XML, JSON, pero es más fácil), y luego analizarlo en Javascript. Mostrar títulos para el usuario, id guardar para usted.

Answer 2

En general, xajax podría simplificar bastante las cosas. Echar un vistazo a mi respuesta aquí:

how to assign a javascript variable to a smarty variable

Answer 3

me di cuenta en la discusión anterior que estés volviendo JSON ahora, y analizarlo desde el lado del cliente. Y noté que etiquetaste tu pregunta con jQuery, así que supongo que estás usando eso. Esta no es una respuesta a su pregunta, pero aquí hay algunos consejos para la codificación de JavaScript con jQuery que ayudará a simplificar su código de una tonelada.

• en lugar de hacer sus llamadas ajax usando directamente el objeto XMLHttpRequest, sólo tiene que utilizar $ .get (url, successFunction)
• en lugar de utilizar getElemenById ('algunos-id'), utilice $ ('# algu- id '), luego para hacer cosas como vaciar el html interno, puede hacer $ (' # some-id '). html (' '). Usando el elemento jQuery en lugar de HTMLElement, también puede manipular el DOM de forma compatible con varios navegadores: http://api.jquery.com/category/manipulation/
• en lugar de crear su javascript en su HTML (todos esos manejadores onmouseover y onmouseout), use $ ('div.suggest_link ') para seleccionar todos los divs en la página que tienen una clase de "suggest_link". A continuación, adjunte un controlador de eventos en vivo que funcionará en html generado dinámicamente, como este: $ ('div.suggest_link'). Live ('mouseover', handleMouseOverForSuggestLink). Puede leer más sobre esto en la página de jQuery: http://api.jquery.com/live/

Todas estas sugerencias funcionarán en los navegadores modernos, y ayudarán a reducir una gran cantidad de código. ¡Buena suerte!