如何使用Ajax和HTML结构来回显自动完成选项？

1. 我想创建一个自动填充搜索框。 它获取一个JSON并将它们发送到的HTML5 。

它工作正常但它不能在值中使用空格！ 所以它只返回第一个单词。 例如，如果jresults.name是“let go” – 我只得到“let”。

这样做的最佳方式是什么？

2. 这部分： $( "#prod_name_list" ).children().remove(); 阻止我从列表中选择一个选项。 因为当我“键入”时它会删除其中的所有内容，所以我需要一个不同的解决方案。

3. 第二部分是在提交表单后我想要获取对象的id。 （ jresults.id ）我不知道如何使用提交检索它。

我的代码：

JS部分：

  $("#prod_name").bind("keyup", function(e) { if (e.which = 48){ $( "#prod_name_list" ).children().remove(); var prod_name = $("#prod_name").val(); $.ajax({ method: "POST", url: "", data: ({ "prod_name": prod_name }), success: function (result){ var jresults = JSON.parse(result); console.log("jresults: "+jresults); var lng = jresults.length; console.log("lng: "+lng); for (var i=0; i<lng; i++) { if (jresults.hasOwnProperty(i)) { console.log("name: "+jresults[i].name); $("#prod_name_list").append(""+jresults[i].name+""); } } } }); } }); 

HTML部分（使用表单的codeigniter语法：

  'prod_name', 'id' => 'prod_name', 'name' => 'prod_name', 'list' => 'prod_name_list'); echo form_input('prod_name', 'prod Name', $attributes); ?>   

Answer 1

这里有一些工作要做，但让我们跳到一个有用的例子： https ： //jsfiddle.net/Twisty/a2z7e1yb/

我测试过的HTML ：

 Name:   

我建议使用JQuery ：

 $(document).ready(function() { $("#prod_name").keyup(function() { $.ajax({ method: "POST", url: "", data: { "prod_name": $("#prod_name").val(); }, success: function(result) { console.log(result); var options = ""; $.each(result, function(k, v) { console.log("name: " + v.name); options += "\r\n"; }); console.log(options); $("#prod_name_list").html(options); } }); }); }); 

如前所述，您可以使用onKeyPress和onKeyUp 。 我把它留给你。

我测试的测试数据看起来像：

 [ { "name": "Lets Go" }, { "name": "Go More" } ] 

$.each()适用于此。 它将迭代每个数组项并将其Key放入k ，每个对象放入v 。 然后我们生成一个包含所有选项的字符串并替换我们的datalist任何内容。因此，如果结果集在第一个字符上是15个选项，那么它将被替换为下一次击键，而不管我们得到什么结果集。

在我看来，使用.remove()和.append()对于这种类型的应用程序来说变得很麻烦。 您希望删除所有选项，或用您收到的任何新数据替换它们。 在我的工作示例中，当按下某个键时，我们会看到：

我希望这很清楚并帮助你。 如果不是，请发表评论并告诉我。

更新

我认为你可能错误地使用了标签。 它应该在页面加载时完全填充，而不是在输入文本后填充。 在此处查看更多信息： https ： //developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

它应该像这样使用： https ： //jsfiddle.net/Twisty/a2z7e1yb/2/

 Name:   

如果你真的想让它像JQuery UI的Autocomplete，你可以构建一个

或

，并将结果作为一个列表。 按下某个键时将填充此列表，仅显示相关结果。 例如，如果按下“L”，它将向您的PHP发送该值，该值将显示“Let’s Go”以及以“L”开头的任何其他产品名称。 它与不同，它在List中查找包含“L”的任何内容。