Ajax PHP 实时搜索 - 需要第二步

Posted 2023-02-24

【中文标题】Ajax PHP 实时搜索 - 需要第二步

【英文标题】：Ajax PHP Live Search - Second Step Needed

【发布时间】：2012-01-22 20:14:17

【问题描述】：

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

我需要一种允许用户点击特定结果项目的方法，然后在点击的项目下方打开一个带有几个单选按钮的框，其中列出了包含各种数量的特定食物项目的选项.然后，用户将能够选择一个金额选项并单击提交以保存他们的选择。

我非常了解 PHP、MySQL 和 html，但 JS 有点挑战，所以如果您能详细回答，我将不胜感激。

以下是我目前拥有的一些代码 sn-ps：

HTML 搜索表单：

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

带有搜索表单的同一页面上的 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;
  

  

  

PHP 脚本在 MySQL 中查看名为 FOOD_DES 的表并返回填充食物下拉列表的结果：

  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>";
  
  

【问题讨论】：

cs.arizona.edu/~mccann/indent_c.html#One

确保您在处理此问题时可以看到 AJAX 请求/响应 - 这非常有帮助。 Chrome 原生有这个，或者 Firefox+Firebug 也不错。

【参考方案1】：

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

通过使用 jQuery 而不是纯 javascript，您将为自己节省大量时间和精力。它还会将您的第 2 步减少到几行代码，因为它带有自己的Ajax API。这是tutorial on its Ajax system - 简单多了！

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

从我在第 3 步中可以看出，您没有清理您的查询，$_GET['q'] 被直接扔到您的查询字符串中。您应该将其替换为您在上面已经定义了几行的 $searchQry。

【讨论】：

+1，肯定是 JS 库。 Google 等人在本地做所有事情来为每个请求节省几 KB - 任何不在如此稀有高度操作的人都应该使用 jQuery/MooTools/Prototype 等。

【参考方案2】：

这是您可以使用 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 上，我们都有一个 jquery 函数“search”，它将运行一个 php 脚本。

假设我们有这样的 html。我们有一个输入字段和一个列表来显示结果。

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

我们有一个 Jquery 脚本，它将监听输入字段上的 keyup 事件，如果它不为空，它将调用 search() 函数。 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);
        
    

【参考方案3】：

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

【讨论】：

请注意 link-only answers 是不鼓励的，所以答案应该是寻找解决方案的终点（而不是另一个参考中途停留，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。