Question

Customer textfield with autocomplete from database

我成功创建了一个带有自动填充功能的客户文本字段，以显示按所输入文本开头的客户。

一个文本字段的

index.php

              <meta charset="utf-8">
          <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
          <script src="//code.jquery.com/jquery-1.10.2.js"></script>
          <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
          <script>
          $(function() {
            $( "#customer" ).autocomplete({
                source: "../phpfiles/search.php",
            });
          });
          </script>



        <div class="ui-widget">
        <!-- action='./../customer_report_request' -->
            <form id="customer_report_request" name="customer_report_request" method="post">
                <table>
                    <tr>
                        <th colspan='2'>Search Customer</th>
                    </tr>
                    <tr>
                        <td>
                            <label>Customer: </label>
                            <input name="customer" id="customer" value='' required>
                        </td>
                        <td>
                            <label>Submit: </label>
                            <input value="Send" name="send_customer_request" type="submit" id="send_customer_request">
                        </td>
                    </tr>
                </table>
            </form>
        </div>

        <?php
            //Display the list of customer details
            if(isset($_POST['send_customer_request']))
            {
                include 'db.php'; //connection

                $query = "SELECT * FROM customer WHERE Company_Name = '".$_POST['customer']."'"; 
                $customer_result = $db->query($query);
                $count_customer = $customer_result->num_rows;
                if($count_customer>0)
                {
                    echo"<div>";
                    echo "<table>";
                    echo"<tr>";
                    echo"<th>Company_Name</th>";
                    echo"<th>VAT_Registration</th>";
                    echo"<th>Contact_First_Name</th>";
                    echo"<th>Contact_Last_Name</th>";
                    echo"<th>Email</th>";
                    echo"</tr>";

                    while ($row = $customer_result->fetch_assoc()) 
                    {
                        echo"<tr>";
                        echo"<td>".$row['Company_Name']."</td>";
                        echo"<td>".$row['VAT_Registration']."</td>";
                        echo"<td>".$row['Contact_First_Name']."</td>";
                        echo"<td>".$row['Contact_Last_Name']."</td>";
                        echo"<td>".$row['Email']."</td>";
                        echo"</tr>";
                    }
                    echo "</table>";
                    echo"</div>";
                }
                $db->close();
            }

        ?>

一个文本字段

Search.php

            <?php
        $dbHost = 'localhost';
        $dbUsername = 'bobo';
        $dbPassword = 'rodnik';
        $dbName = 'training';

        //connect with the database
        $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);

        //get search term
        $searchTerm = $_GET['term'];

        //get matched data from customer table

        $query = $db->query("SELECT * FROM customer WHERE Company_Name LIKE '".$searchTerm."%' ORDER BY Company_Name ASC"); //Starts with


        while ($row = $query->fetch_assoc()) {
            $data[] = $row['Company_Name'];
        }
        //return json data
        echo json_encode($data);
        ?>

问题是我想使用单个搜索php文件来满足其他查询。例如：

如果在“联系人”文本字段中输入了单词，则查询将为 “SELECT * FROM Contact ....”
如果在“客户”文本字段中输入了单词，则查询将为 “SELECT * FROM Customer ....”

index.php和search.php都经过修改以实现此目的。

index.php中的修改部分

定义了一个jQuery变量component_name。客户texfield将使用POST方法将变量发送到 search.php 文件，以便 index.php 文件中的更改被识别并用于查询目的。

联系人文本字段可以是index.php文件中的相同格式，也可以是另一个php文件。

             <script>
              $(function() {
                $( "#customer" ).autocomplete({
                    var component_name= "customer";

                    source: "../phpfiles/search.php",
                    minLength: 1, 
                    change: function(event, ui) 
                    {
                        $.post("../phpfiles/search.php", data{post_data: component_name});
                    }
                });
              });
          </script>

修改了search.php

        <?php
    $dbHost = 'localhost';
    $dbUsername = 'bobo';
    $dbPassword = 'rodnik';
    $dbName = 'training';
    //connect with the database
    $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
    //get search term
    $searchTerm = $_GET['term'];
    //get matched data from skills table

    $query="";
    if($_POST['post_data']=="customer")
    {

        $query = $db->query("SELECT * FROM customer WHERE Company_Name LIKE '".$searchTerm."%' ORDER BY Company_Name ASC"); //Starts with
        while ($row = $query->fetch_assoc()) 
        {
            $data[] = $row['Company_Name'];
        }

        //return json data
        echo json_encode($data);
    }


    ?>

任何人都可以帮助我实现这一目标吗？

我将这些链接用于jquery-ui和jquery api部分：

api.jquery.com
jqueryui.com

Answer 1

这可能是一个有点复杂的广告，我希望它有所帮助。您的示例未向您的数据库提供任何示例数据或架构，因此我不得不做出一些猜测。你需要调整。

考虑一下你是否有不同的输入字段，你可以：

<强> HTML

<div class="ui-widget">
  <form id="customer_report_request" name="customer_report_request" method="post">
    <table>
      <tr>
        <th colspan='2'>Search Customer</th>
      </tr>
      <tr>
        <td>
          <label>Customer: </label>
          <input class="entry-field" name="customer" id="customer" value='' required>
        </td>
        <td>
          <label>Submit: </label>
          <input value="Send" name="send_customer_request" type="submit" id="send_customer_request">
        </td>
      </tr>
      <tr>
        <td>
          <label>Contact: </label>
          <input class="entry-field" name="contact" id="contact" value='' required>
        </td>
        <td>
          <label>Submit: </label>
          <input value="Send" name="send_customer_request" type="submit" id="send_ccontact_request">
        </td>
      </tr>
    </table>
  </form>
</div>

<强>的JavaScript

$(function() {
  $(".entry-field").autocomplete({
    source: function(req, resp) {
      // determine which field we're working with
      var type = $("this").attr("id");
      // collect the entry in the field
      var term = req.term;
      // Prepare our response array
      var responses = [];
      // PErform POST Request to our Search and accept JSON results
      $.ajax({
            url: "../phpfiles/search.php",
            data: {
              t: type,
              q: term
            },
            type: "POST",
            dataType: "JSON",
            success: function(results) {
              $.each(results, function(key, val) {
                responses.push(val);
              });
            }); resp(responses);
        },
        minLength: 1
    }
  });

  $("#customer_report_request").submit(function(e) {
    e.preventDefault();
    if ($("#customer").val().length) {
      // perform POST to a PHP search for that specific customer details
    } else {
      // performn a post to a PHP search for that specific contact details
    }
    // populate result DIV on page with resulting data from POST
  });
});

PHP：search.php

<?php
$dbHost = 'localhost';
$dbUsername = 'bobo';
$dbPassword = 'rodnik';
$dbName = 'training';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
// get search query
$searchTerm = $_POST['q'];
// get search type
$searchType = $_POST['t'];
//get matched data from customer table
if($searchType == "customer"){
    /* create a prepared statement */
    $stmt = $mysqli->prepare("SELECT * FROM customer WHERE Company_Name LIKE '?%'");

} else {
    /* create a prepared statement */
    $stmt = $mysqli->prepare("SELECT * FROM customer WHERE Contact_Name LIKE '?%'");
}
/* bind parameters for markers */
$stmt->bind_param("s", $searchTerm);
/* execute query */
$stmt->execute();
/* instead of bind_result: */
$result = $stmt->get_result();
while ($row = $results->fetch_assoc()) {
    if($searchType == "company"){
        $data[] = $row['Company_Name'];
    } else {
        $data[] = $row['Contact_Name']
    }
}
//return json data
header('Content-Type: application/json');
echo json_encode($data);
?>

所以有很多事情要发生。将从您的PHP开始。它容易受到SQL注入攻击，所以我利用MySQLi Prepare来保护事物。我们希望将数据发布到此脚本，并且我们期待条件：query和type。如果我们没有获得类型，我们可以设置默认值。可能要为query添加一个检查，但它应该总是有一个字符。

我们使用source选项的函数方法将此数据提供给我们的搜索脚本。查看更多：http://api.jqueryui.com/autocomplete/#option-source

功能：第三种变体，即回调，提供最大的灵活性，可用于将任何数据源连接到自动完成。回调有两个参数：


一个request对象，具有单个term属性，该属性引用文本输入中当前的值。例如，如果用户输入＆＃34; new yo＆＃34;在城市字段中，自动填充term将等于＆＃34; new yo＆＃34;。

一个response回调，它需要一个参数：向用户建议的数据。应根据提供的term过滤此数据，并且可以采用上述任何简单本地数据格式。在提供自定义源回调以处理request期间的错误时，这一点非常重要。即使遇到错误，也必须始终调用response回调。这可确保窗口小部件始终具有正确的状态。

因此，我们可以添加$.ajax()调用并使用error回调。基本上，我们最终会将空数组发送回response。

因此我们向PHP发送一个搜索词，我们将JSON数组数据发回，我们将其传输到我们自己的数组中以发送回response，用户将获得结果列表。

它仍然有点笨拙，如果那是你用户习惯的话，那就没关系了。您可以减少它并对结果进行分类。这样您就可以拥有一个搜索字段。此外，一旦选择了某个内容或字段发生变化，您就可以再次使用AJAX从另一个从数据库中收集所有数据的PHP中提取这些详细信息。这将导致无需等待页面再次加载等。

我希望这能回答你的问题，我怀疑它会引起更多的问题。继续搜索，有很多答案。有时，将一个大问题分解为较小的单个问题比解决整个问题更容易。

PHP＆amp; jQuery - 使用自动完成创建两个不同的文本字段，这些文本字段具有从数据库中检索的不同数据列表

1 个答案: