具有大型数据集的基于 PHP 的表单自动完成 [关闭]答案

【问题标题】：PHP-based form auto completion with large dataset [closed]具有大型数据集的基于 PHP 的表单自动完成 [关闭]
【发布时间】：2020-04-14 11:49:37
【问题描述】：

我正在开发一个 Web 应用程序，其中我在 SQL 数据库中有大量（约 50'000）个文本字符串（此处称为“项目”）。用户应在输入表单中从这些项目中选择三个。我尝试了一些“直接”解决方案（下拉组合框等），但这些解决方案太慢了，有 50'000 个项目可供选择。使用 JavaScript 实现文本框自动完成的传统解决方案存在类似问题：具有允许选项的 JavaScript 文件变得太大（许多 MiB）。

我希望有一个解决方案，在用户键入时从 SQL 数据库中动态获取剩余的可能项。例如，如果输入了前三个字母，则通常只剩下几百个可能的项目。但是，我不知道如何在用户键入时实现数据库访问（无需重新加载页面，以便执行 PHP 代码）。

我不使用任何内容管理系统；我更喜欢不依赖庞大的第三方库的纯 HTML/PHP/JavaScript/jQuery/CSS 解决方案。感谢您的建议！

【问题讨论】：

onchange 事件，对查询和建议匹配值的服务器进行 AJAX 调用。例如，在用户输入至少 3 个字符（可能更多）之前，不要开始此操作。这样可以避免搜索所有带有“a”的条目！话虽如此，预计您的问题很快就会结束。开始使用 AJAX 教程，进行大量研究，然后根据需要在此处发布。

标签： javascript php html sql autocomplete

【解决方案1】：

你需要使用php jquery和ajax

<form autocomplete="off" action="">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
    <div id="myInputautocomplete-list" class="autocomplete-items">
        //insert ajax response here
    </div>
  </div>
  <input type="submit">
</form>

//css代码

* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

<script>
window.addEventListener('load',function(){
        jQuery(document).ready(function($) {   
            $("#myInput").keypress(function() {  
                var inputData = $("#myInput").text('');
                if(inputData.length > 2) {
                    $.ajax({
                        url     : "/ajax.php",
                        type    : "POST",
                        data    : {'myInput': $(this).val()},
                        dataType: 'json',
                        success: function (response) {         
                            //after ajax call here you get the data
                            alert(response.data);
                            // user below divs to iterated data
                            /*
                            <div><strong>D</strong>enmark
                            <input type="hidden" value="Denmark"></div>
                            <div><strong>D</strong>jibouti
                            <input type="hidden" value="Djibouti"></div> */
                    });
                }
            });
        });
    });
</script>

现在在 ajax.php 文件中

$inputData = $_POST[myInput];

//建立sql连接或包含连接文件

//连接后写查询获取数据

//假设表名项

$query = "select * from tableName where itemName like $inputData%";
$res = mysql_query($query);
$data = mysql_fetch_data($res);

$result = json_encode("code":200,"data":$data)
return $result;

【讨论】：