2011-02-07 2 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은 쉽게), 다음 자바 스크립트를 구문 분석합니다. 사용자에게 제목 표시, ID는 혼자있게하십시오.

+0

또한 원하는 다른 형식으로 반환하고 자바 스크립트에서 구문 분석 할 수 있습니다. 하지만 JSON은 확실히 표준입니다. – Prescott

+0

@Prescott 당신이 말했듯이, 그것은 필수는 아니지만, PHP의'json_encode' 덕분에 가장 간단한 해결책입니다. – singles

+0

나는이 코드에서 1-TITLE과 같은 것을 전달할 수 있습니까? 그리고 자바 스크립트에서 ID의 제목을 폭발시킬 수 있습니까? – WilfredMifsud

1

: 여기 내 대답에서보세요. 그리고 jQuery로 질문에 태그를 붙인 것을 보았습니다. 그래서 나는 그것을 사용하고 있다고 생각합니다. 이것은 귀하의 질문에 대한 답변이 아니지만 여기에 귀하의 코드를 단순화하는 데 도움이됩니다 jQuery와 자바 스크립트 코딩에 대한 몇 가지 도움말입니다. 대신 직접 XMLHttpRequest 객체를 사용하여 AJAX 호출을하는

  • 단지 ($를 사용하는 대신에서 getElementById ('일부-ID')를 사용하는 (successFunction를 URL)
  • 을 $ 갔지을 사용하여 '# some- id '), 내부 HTML을 비우는 것과 같은 일을하려면 $ ('# some-id '). html (' ')을 사용할 수 있습니다. HTMLElement 대신 jQuery 요소를 사용하여 브라우저 간 호환 방식으로 DOM을 조작 할 수도 있습니다. HTML (모든 onmouseover 및 onmouseout 핸들러)에 javascript를 작성하는 대신 http://api.jquery.com/category/manipulation/
  • , $ ('div.suggest_link ')를 클릭하여 페이지에서'suggest_link '클래스가있는 모든 div를 선택합니다. 그런 다음 $ ('div.suggest_link'). live ('mouseover', handleMouseOverForSuggestLink)와 같이 동적으로 생성 된 html에서 작동하는 라이브 이벤트 핸들러를 연결합니다. 자세한 내용은 jQuery의 페이지에서 확인할 수 있습니다. http://api.jquery.com/live/

이러한 모든 제안은 최신 브라우저에서 작동하며 많은 코드를 줄일 수 있습니다. 행운을 빕니다!

관련 문제