Ajax PHP Live Search - 需要第二步

Question

我有一个Ajax PHP MySQL实时搜索，基本上从MySQL数据库中提取食物并将它们显示在下拉列表中，当用户输入搜索词时，每行一个项目，就像在谷歌搜索一样。

我需要的是一种允许用户点击特定结果项目的方法，并且为了打开它，在被点击的项目下方，具有几个单选按钮的框中列出了具有各种量的特定食物的选项项目。用户然后可以选择金额选项并点击提交以保存其选择。

我非常了解PHP和MySQL和HTML，但JS是一个挑战，所以如果能在您的答案中详细说明，我将不胜感激。

下面是一些代码段与我有什么在这一点上：

1. 的HTML搜索表单：

   <input type="text" size="30" name="food_name" id="q" value="" onkeyup="sendRequest(this.value);" autocomplete="off"/> 
   

2. 同一页面瓦特/搜索表单上的AJAX代码：

   function createRequestObject() { 
   
       var req; 
   
   if(window.XMLHttpRequest){ 
       // Firefox, Safari, Opera... 
       req = new XMLHttpRequest(); 
   } else if(window.ActiveXObject) { 
       // Internet Explorer 5+ 
       req = new ActiveXObject("Microsoft.XMLHTTP"); 
   } else { 
       alert('Problem creating the XMLHttpRequest object'); 
   } 
   
   return req; 
   
   } 
   
   // Make the XMLHttpRequest object 
   var http = createRequestObject(); 
   
   function sendRequest(q) { 
   
   // Open PHP script for requests 
       http.open('get', 'checkfoods.php?q='+q); 
       http.onreadystatechange = handleResponse; 
       http.send(null); 
   
       } 
   
       function handleResponse() { 
   
       if(http.readyState == 4 && http.status == 200){ 
   
       // Text returned FROM the PHP script 
       var response = http.responseText; 
   
       if(response) { 
       // UPDATE ajaxTest content 
       document.getElementById("searchResults").innerHTML = response; 
       } 
   
       } 
   
       } 
   

3. 该PHP脚本查看名为FOOD_DES的表到MySQL中并带来回结果填充食品的下拉列表：

   include 'my-food-dtabase.php'; 
   
       $searchQry = isset($_GET['q']) ? mysql_real_escape_string($_GET['q']) : false; 
   
       if ($searchQry) { 
       $searchString = $_GET['q']; 
   
       $sql = mysql_query("SELECT NDB_No, FdGrp_Cd, Long_Desc FROM FOOD_DES WHERE Long_Desc LIKE '%".$_GET['q']."%' ORDER BY Long_Desc ASC"); 
   
       if($searchString != NULL) { 
   
       while($row = mysql_fetch_assoc($sql)) { 
       echo "<span id=foodlist><a href=calorie-counter-serving.php?NDB_No=".$row['NDB_No'].">".$row['Long_Desc']."</a><br /></span>"; 
   } 
   } 
   
       if(mysql_num_rows($sql) == 0) { 
       echo "<span class=medium_white>Food item not found. Try a different name or keyword.</span>"; 
       } 
       } 
   

Answer 1

这不一定是一个完整的答案，但在正确的方向指针。

通过在纯JavaScript中使用jQuery，您将节省大量时间和精力。它还会将您的第2步缩减为几行代码，因为它自带的Ajax API。这里有一个tutorial on its Ajax system - 非常容易！

jQuery UI是jQuery的一个很好的扩展，它可以帮助您构建用户界面，其中一部分是对话框小部件。我认为'Modal form' dialog example与您点击“创建新用户”按钮时试图达到的效果非常相似。点击“查看源代码”查看他们是如何做到的。

另外从我可以在第3步中看到，你不是在清理你的查询，$ _GET ['q']被直接扔到你的查询字符串中。你应该用$ searchQry替换它，你已经在上面定义了几行。

Answer 2

http://koding.info/2013/07/ajax-search-box-php-mysql-jquery/ 我已经实现了一个使用Wordpress数据库的演示Live搜索应用程序。 看一看。 它可能会帮助你。

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 Description 
       $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); 
     } 
    }