在PHP/Javascript中自动完成表单

我一整天都在试着制作一个自动完成的脚本，但我似乎无法理解

<form method="POST">
  <input type="number" id="firstfield">

  <input type="text" id="text_first">
  <input type="text" id="text_sec">
  <input type="text" id="text_third">

</form>

这是我的html。 我想做的是使用ajax自动完成第一个字段 像这样：

当第一个输入中有9个数字时，它会用正确的链接数据填充其他输入

php上的脚本向服务器发送一个mysqli_查询，并请求所有 数据（表：字段| |行：数字、第一、第二、第三）

PHP集成示例：

<?php
/* add your db connector in bootstrap.php */
require 'bootstrap.php';

/*
$('#categories').select2({
    placeholder: 'Search for a category',
    ajax: {
        url: "/ajax/select2_sample.php",
        dataType: 'json',
        quietMillis: 100,
        data: function (term, page) {
            return {
                term: term, //search term
                page_limit: 10 // page size
            };
        },
        results: function (data, page) {
            return { results: data.results };
        }

    },
    initSelection: function(element, callback) {
        return $.getJSON("/ajax/select2_sample.php?id=" + (element.val()), null, function(data) {

                return callback(data);

        });
    }

});
*/

$row = array();
$return_arr = array();
$row_array = array();

if((isset($_GET['term']) && strlen($_GET['term']) > 0) || (isset($_GET['id']) &&      is_numeric($_GET['id'])))
{

if(isset($_GET['term']))
{
    $getVar = $db->real_escape_string($_GET['term']);
    $whereClause =  " label LIKE '%" . $getVar ."%' ";
}
elseif(isset($_GET['id']))
{
    $whereClause =  " categoryId = $getVar ";
}
/* limit with page_limit get */

$limit = intval($_GET['page_limit']);

$sql = "SELECT id, text FROM mytable WHERE $whereClause ORDER BY text LIMIT $limit";

/** @var $result MySQLi_result */
$result = $db->query($sql);

    if($result->num_rows > 0)
    {

        while($row = $result->fetch_array())
        {
            $row_array['id'] = $row['id'];
            $row_array['text'] = utf8_encode($row['text']);
            array_push($return_arr,$row_array);
        }

    }
}
else
{
    $row_array['id'] = 0;
    $row_array['text'] = utf8_encode('Start Typing....');
    array_push($return_arr,$row_array);
}

$ret = array();
/* this is the return for a single result needed by select2 for initSelection */
if(isset($_GET['id']))
{
    $ret = $row_array;
}
/* this is the return for a multiple results needed by select2
* Your results in select2 options needs to be data.result
*/ 
else
{
    $ret['results'] = $return_arr;
} 
echo json_encode($ret);

$db->close();

)))

以下脚本摘自官方文件，可能更易于采用：

$("#e6").select2({
        placeholder: {title: "Search for a movie", id: ""},
        minimumInputLength: 1,
        ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
            url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
            dataType: 'jsonp',
            data: function (term, page) {
                return {
                    q: term, // search term
                    page_limit: 10,
                    apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
                };
            },
            results: function (data, page) { // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to alter remote JSON data
                return {results: data.movies};
            }
        },
        formatResult: movieFormatResult, // omitted for brevity, see the source of this page
        formatSelection: movieFormatSelection  // omitted for brevity, see the source of this page
    });

这可以在这里找到：

---

您可以在上面的github存储库中选择select2的副本

这不是我的意思，你给我的例子有一个列表，它没有像图片中那样完成输入。不，你仍然需要单击输入下面的结果来完成它。你可以按tab键来完成它。如果您自动填写文本，那么如果文本不匹配，用户将不得不删除它以继续键入。不管怎么说，我只是觉得我可以提供一个替代方案来重新发明轮子。

$this->widget('ext.ESelect2.ESelect2', array(
'name' => 'userID',
'options' => array(
    'minimumInputLength' => '3',
    'width' => '348px',
    'placeholder' => 'Select Person',
    'ajax' => array(
        'url' => Yii::app()->controller->createUrl('API/searchUser'),
        'dataType' => 'json',
        'data' => 'js:function(term, page) { return {q: term }; }',
        'results' => 'js:function(data) { return {results: data}; }',
    ),
),

$("#e6").select2({
        placeholder: {title: "Search for a movie", id: ""},
        minimumInputLength: 1,
        ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
            url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
            dataType: 'jsonp',
            data: function (term, page) {
                return {
                    q: term, // search term
                    page_limit: 10,
                    apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
                };
            },
            results: function (data, page) { // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to alter remote JSON data
                return {results: data.movies};
            }
        },
        formatResult: movieFormatResult, // omitted for brevity, see the source of this page
        formatSelection: movieFormatSelection  // omitted for brevity, see the source of this page
    });