Php Ajax Json 搜索并填写输入字段

Question

我需要执行搜索并将其动态保存在输入字段中。我是 Ajax 新手。

这就是我所做的。 从数据库查询并使用json编码如下

[{"id":"1","name":"Jack"},{"id":"2","name":"Ace"},{"id":"3","name":"Test"}]

现在有一个带有名称输入字段的表单（注意：只允许来自数据库的现有名称）。输入名称时，我需要在 Json 中执行搜索并获取名称并显示在输入字段下方（谷歌搜索如何显示相关搜索字词），一旦单击该名称应该是可点击的，它应该使用该名称填充输入文本.并更改具有相应 id 的隐藏输入字段的值。

<input id="name" type="text" name="name">
<input id="id" type="hidden" name="id">

正如我之前所说，仅允许列表中的名称，如果输入不存在的名称，则隐藏元素中不应包含值或 0。

我怎样才能完成它？而且它应该被优化（快速），因为它必须在大量数据中搜索，比如大约 15k-20k 个名字。

Answer 1

检查我为您的要求创建的这个小提琴，我使用了自动完成方法

http://jsfiddle.net/X85LT/

var src = [{
"label": "Jack",
    "value": "1"
}, {
    "label": "back",
        "value": "2"
}, {
    "label": "tera",
        "value": "3"
}, {
    "label": "judo",
        "value": "4"
}];

$('.name').change(function() {
 $('.value').val(0);
});

$(".name").autocomplete({
    source: src,
    select: function (event, ui) {
        event.preventDefault();
        this.value = ui.item.label;
        $('.value').val(ui.item.value);
    }
});

// html

<input type="text" class="name" />
<input type="text" class="value" />