Javascript 如何使用Ajax和HTML结构来回显自动完成选项？ 我想创建一个自动填充搜索框。它获取一个JSON并将它们发送到HTML5的

它工作正常，但不能在值中使用空格！所以它只返回第一个单词。例如，如果

jresults.name

是“lets go”-我只得到“lets”

最好的方法是什么

此部分：

$（“产品名称列表”）.children（）.remove（）阻止我从列表中选择选项。因为当我“加密”时，它会删除其中的所有内容，所以我需要一个不同的解决方案

第二部分是在提交表单之后，我希望获得所选对象的id。（

jresults.id

）我不知道如何使用submit检索它

我的代码：

JS部分：

        $("#prod_name").bind("keyup", function(e) {

            if (e.which <= 90 && e.which >= 48){

                $( "#prod_name_list" ).children().remove();
                var prod_name = $("#prod_name").val();

                $.ajax({
                    method: "POST",
                    url: "<?php echo site_url('kas/search_prod_name'); ?>",
                    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("<option name=\"prod_id\" id="+jresults[i].id+">"+jresults[i].name+"</option>");
                            }
                        }

                    }
                });

            }

        });

$（“产品名称”）.bind（“键控”，函数（e）{
如果（e.which=48）{
$（“产品名称列表”）.children（）.remove（）；
var prod_name=$（“#prod_name”）.val（）；
$.ajax({
方法：“张贴”，
url:“”，
数据：（{“产品名称”：产品名称}），
成功：功能（结果）{
var jresults=JSON.parse（结果）；
log（“jresults:+jresults”）；
var lng=jresults.length；
控制台日志（“lng:+lng”）；
对于（var i=0；i

这里有一些需要解决的问题，但让我们跳到一个可行的例子：

HTML我用以下方法测试：

Name: <input class="prod_name" id="prod_name" name="prod_name" list="prod_name_list" />
<datalist id="prod_name_list">

</datalist>

$.each（）

在这方面效果很好。它将迭代每个数组项，并将其键放入

k

，将每个对象放入

v

。然后我们生成一个包含所有选项的字符串，并替换

数据列表中的任何内容

，因此，如果结果集在第一个字符上是15个选项，那么它将在下一次击键时被替换不管我们得到什么结果

在我看来，使用

.remove（）

和

.append（）

对于这种类型的应用程序来说是很麻烦的。您希望删除所有选项，或者用接收到的任何新数据替换它们。在我的工作示例中，当按下一个键时，我们看到：

<datalist id="prod_name_list">
  <option value="0">Lets Go</option>
  <option value="1">Go More</option>
</datalist>

走吧
继续

我希望这是清楚的，并帮助你。如果不是，请留下评论，让我知道

更新

我认为您可能错误地使用了

标记。它应该在页面加载时完全填充，而不是在输入文本之后。请参阅此处的详细信息：

应该这样使用：

名称：

---

如果您真的想让它像JQuery UI的自动完成一样，您可以构建一个

或

，其中的结果是一个列表。当按下一个键时，这个列表将被填充，只显示相关的结果。例如，如果按下“L”，它会将该值发送给PHP，并显示“Let's Go”以及任何其他以“L”开头的产品名称。它不同于在列表中查找任何包含“L”的内容的

。

这里有一些需要解决的问题，但让我们跳到一个工作示例：

HTML我用以下方法测试：

Name: <input class="prod_name" id="prod_name" name="prod_name" list="prod_name_list" />
<datalist id="prod_name_list">

</datalist>

$.each（）

在这方面效果很好。它将迭代每个数组项，并将其键放入

k

，将每个对象放入

v

。然后我们生成一个包含所有选项的字符串，并替换

数据列表中的任何内容

，因此，如果结果集在第一个字符上是15个选项，那么它将在下一次击键时被替换不管我们得到什么结果

在我看来，使用

.remove（）

和

.append（）

对于这种类型的应用程序来说是很麻烦的。您希望删除所有选项，或者用接收到的任何新数据替换它们。在我的工作示例中，当按下一个键时，我们看到：

<datalist id="prod_name_list">
  <option value="0">Lets Go</option>
  <option value="1">Go More</option>
</datalist>

走吧
继续

我希望这是清楚的，并帮助你。如果不是，请留下评论，让我知道

更新

我认为您可能错误地使用了

标记。它应该在页面加载时完全填充，而不是在输入文本之后。请参阅此处的详细信息：

应该这样使用：

名称：

---

如果您真的想让它像JQuery UI的自动完成一样，您可以构建一个

或

，其中的结果是一个列表。当按下一个键时，这个列表将被填充，只显示相关的结果。例如，如果按下“L”，它会将该值发送给PHP，并显示“Let's Go”以及任何其他以“L”开头的产品名称。它不同于在列表中查找任何包含“L”的内容的

.

我建议您调查一下，我知道这不是您问题的答案。但它将帮助您轻松实现自动完成。它选择了事件处理程序。在选择时，您可以将id保留在隐藏字段中。我现在正在使用手机，帮不了您多少忙。我不想使用jQuery UI。我不想加载不相关的libra我只为一件事访问了我的网站：XYou已经在使用JQuery，因此给了你一个建议。是的，我知道，我想从0获得使用jQueryDid进行此操作的经验。你检查从服务器获得的json结果吗？我建议你查看我知道这不是你问题的答案。但它将帮助你实现自动c很容易完成。它选择了事件处理程序。在选择时，你可以将id保留在隐藏字段中。我现在正在使用手机，帮不了你多少忙。我不想使用jQuery UI。我不想将不相关的库加载到我的网站，因为只有一件事：XYou已经在使用jQuery，因此给了你一个建议。是的，我知道，我想如果您使用JQueryId从0执行此操作，请检查您得到的结果json

<datalist id="prod_name_list">
  <option value="0">Lets Go</option>
  <option value="1">Go More</option>
</datalist>

<label>Name:
<input class="prod_name" id="prod_name" name="prod_name" list="prod_name_list" /></label>
<datalist id="prod_name_list">
  <option value="Let's Go" />
  <option value="No Go" />
  <option value="Go Back to Bed" />
</datalist>