mysql php js實時搜索

Question

我目前正在做一個基於Jquery/ajax/php的實時搜索表單，但它的劑量似乎工作。 你們可以在我的代碼中遇到問題嗎？ :)

function getStates(value) { 
    $.post("search.php",{ partialState: value }, function(data) { 
    $("#results").html(data); 
    }); 
} 

<input type="text" onkeyup="getStates(this.value)" /> 
<div id="results"></div> 

的search.php：

$partialStates = $_POST['partialState']; 
$states = mysql_query("SELECT institution_name FROM sb_institutions WHERE institution_name LIKE '%$partialStates%'"); 

while($stateArray = mysql_fetch_array($states)) { 
    echo "<div>" . $state['institution_name'] . "</div>"; 
} 

謝謝！ :)

Answer 1

您的代碼看起來沒問題。

解決ajax問題的最佳方法是使用Firefox和Firebug擴展。

這樣，你可以看到：

1. 如果函數被解僱
2. 如果$ _POST價值觀都是好的：網址+參數
3. 什麼服務器發送一個響應

4. 如果你的js中有錯誤，所有這些都將在螢火蟲的控制檯標籤頁中。安裝螢火蟲後右鍵點擊頁面上的 ，並選擇與螢火蟲調試。

Answer 2

也請參閱本http://crewow.com/AutoSuggest_Search_Tutorial.php Live搜索教程是一個PHP基於AJAX的教程，containts以下頁面和文件夾。

Answer 3

以下是您可以使用Ajax，PHP和JQuery執行的操作。希望這有助於你，或給你一個開始。

在這裏看到現場演示和源代碼。

http://purpledesign.in/blog/to-create-a-live-search-like-google/

創建一個搜索框，可能是這樣的輸入字段。

<input type="text" id="search" autocomplete="off"> 

現在，我們需要聽取任何對文本區域的用戶類型。爲此，我們將使用jquery live（）和keyup事件。在每個keyup上，我們都有一個可以運行php腳本的jquery函數「search」。

假設我們有這樣的html。我們有一個輸入欄和一個列表來顯示結果。

<div class="icon"></div> 
<input type="text" id="search" autocomplete="off"> 
<ul id="results"></ul> 

我們有一個jquery腳本，將聽取輸入字段中keyup事件，如果它不是空的它會調用搜索（）函數。 search（）函數將運行php腳本並使用AJAX將結果顯示在同一頁面上。

這裏是JQuery。

$(document).ready(function() { 

     // Icon Click Focus 
     $('div.icon').click(function(){ 
      $('input#search').focus(); 
     }); 

     //Listen for the event 
      $("input#search").live("keyup", function(e) { 
      // Set Timeout 
      clearTimeout($.data(this, 'timer')); 

      // Set Search String 
      var search_string = $(this).val(); 

      // Do Search 
      if (search_string == '') { 
       $("ul#results").fadeOut(); 
       $('h4#results-text').fadeOut(); 
      }else{ 
       $("ul#results").fadeIn(); 
       $('h4#results-text').fadeIn(); 
       $(this).data('timer', setTimeout(search, 100)); 
      }; 
     }); 


     // Live Search 
     // On Search Submit and Get Results 
     function search() { 
      var query_value = $('input#search').val(); 
      $('b#search-string').html(query_value); 
      if(query_value !== ''){ 
       $.ajax({ 
        type: "POST", 
        url: "search_st.php", 
        data: { query: query_value }, 
        cache: false, 
        success: function(html){ 
         $("ul#results").html(html); 

        } 
       }); 
      }return false;  
     } 



    }) 

; 

在php中，將查詢發送到mysql數據庫。 PHP將返回將使用AJAX放入html中的結果。這裏的結果被放到一個html列表中。

假設有一個包含兩個表的動物和鳥類的虛擬數據庫，其中有兩個相似的列名'type'和'desc'。

//search.php 

// Credentials 
$dbhost = "localhost"; 
$dbname = "live"; 
$dbuser = "root"; 
$dbpass = ""; 

// Connection 
global $tutorial_db; 

$tutorial_db = new mysqli(); 
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname); 
$tutorial_db->set_charset("utf8"); 

// Check Connection 
if ($tutorial_db->connect_errno) { 
    printf("Connect failed: %s\n", $tutorial_db->connect_error); 
    exit(); 
} 
    $html = ''; 
    $html .= '<li class="result">'; 
    $html .= '<a target="_blank" href="urlString">'; 
    $html .= '<h3>nameString</h3>'; 
    $html .= '<h4>functionString</h4>'; 
    $html .= '</a>'; 
    $html .= '</li>'; 
    $search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']); 
    $search_string = $tutorial_db->real_escape_string($search_string); 

// Check Length More Than One Character 
if (strlen($search_string) >= 1 && $search_string !== ' ') { 
    // Build Query 
    $query = "SELECT * 
    FROM animals 
    WHERE type LIKE '%".$search_string."%' 
    UNION ALL SELECT * 
    FROM birf 
    WHERE type LIKE '%".$search_string."%'" 
    ; 
    $result = $tutorial_db->query($query); 
     while($results = $result->fetch_array()) { 
      $result_array[] = $results; 
     } 

     // Check If We Have Results 
     if (isset($result_array)) { 
      foreach ($result_array as $result) { 

       // Format Output Strings And Hightlight Matches 
       $display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['desc']); 
       $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['type']); 
      $display_url = 'https://www.google.com/search?q='.urlencode($result['type']).'&ie=utf-8&oe=utf-8'; 

       // Insert Name 
       $output = str_replace('nameString', $display_name, $html); 

       // Insert Function 
       $output = str_replace('functionString', $display_function, $output); 

       // Insert URL 
       $output = str_replace('urlString', $display_url, $output); 



       // Output 
       echo($output); 
      } 
     }else{ 

      // Format No Results Output 
      $output = str_replace('urlString', 'javascript:void(0);', $html); 
      $output = str_replace('nameString', '<b>No Results Found.</b>', $output); 
      $output = str_replace('functionString', 'Sorry :(', $output); 

      // Output 
      echo($output); 
     } 
    }