2011-02-07 6 views
5

Mam mały problem, chcę na żywo wyszukiwania, które zwraca mi POST_TITLE i POST_ID. tytuł jest dla ludzi, ale głównym powodem jest to, że chcę, aby POST_ID z nim współpracował.Ajax Live Search - Uzyskaj 2 pola zamiast 1

Czy ktoś może mi pomóc, napisałem poniższy kod ...

<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 za wiadomość alarmową – yoda

+0

Także +1 za alert - dzięki za uśmiech na mnie - odpowiedź singli wydaje się najbardziej odpowiednia dla twojej sytuacji. Powodzenia! – Zydeco

Odpowiedz

0

Należy zwrócić dane z serwera w JSON (lub XML, JSON, ale jest łatwiej), a następnie analizować je w JavaScript. Pokaż tytuły dla użytkownika, id zachowaj dla siebie.

+0

może również zwrócić go w dowolnym innym formacie i przeanalizować go w javascript. Ale JSON jest zdecydowanie standardem - po prostu nie jest wymagany. – Prescott

+0

@Prescott Jak powiedziałeś, nie jest to wymagane, ale dzięki 'json_encode' w PHP w takim przypadku jest to najprostsze rozwiązanie. – singles

+0

Czy mogę przekazać coś podobnego do 1-TITLE z tego kodu, który mam, a następnie w javascript eksploduje tytuł z ID? – WilfredMifsud

1

zauważyłem w dyskusji nad wracasz teraz JSON i analizowanie go od strony klienta. Zauważyłem, że oznaczyłeś swoje pytanie jQuery, więc domyślam się, że używasz tego. To nie jest odpowiedź na twoje pytanie, ale oto kilka porad dotyczących kodowania javascript z jQuery, które pomogą uprościć twój kod tonę.

  • zamiast robić swoje ajax połączeń za pomocą obiektu XMLHttpRequest bezpośrednio, wystarczy użyć $ .get (url, successFunction)
  • zamiast korzystania getElementById ('some-id'), używać $ ('# some- id '), a następnie, aby wyczyścić wewnętrzny HTML, możesz zrobić $ (' # some-id '). html (' '). Używając elementu jQuery zamiast HTMLElement, można również manipulować DOM w sposób kompatybilny z różnymi przeglądarkami: http://api.jquery.com/category/manipulation/
  • zamiast budować JavaScript na swoim HTML (wszystkie te narzędzia onmouseover i onmouseout), użyj $ ('div.suggest_link '), aby wybrać wszystkie elementy div na stronie, które mają klasę "suggest_link". Następnie dołącz program do obsługi zdarzeń na żywo, który będzie działać na dynamicznie generowanym html, na przykład: $ ("div.suggest_link"). Live ("mouseover", handleMouseOverForSuggestLink). Więcej informacji na ten temat można znaleźć na stronie jQuery: http://api.jquery.com/live/

Wszystkie te sugestie będą działać w nowoczesnych przeglądarkach i pomogą ograniczyć dużo kodu. Powodzenia!