Question

我想创建一个自动填充搜索框。它获取一个JSON并将它们发送到<datalist>的{{1}}个HTML {5}。

它工作正常，但它不能在值中使用空格！所以它只返回第一个单词。例如，如果<option>是＆＃34;让我们去＆＃34; - 我只得到＆＃34;让我们＃34;

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

此部分：jresults.name阻止我从列表中选择一个选项。因为当我＆＃34; keyup＆＃34;它会删除其中的所有内容。所以我需要一个不同的解决方案。
第二部分是在提交表单后我想要获取对象的id。（$( "#prod_name_list" ).children().remove();），我不确定如何使用提交检索它。

我的代码：

JS部分：

jresults.id

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

        $("#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>");
                            }
                        }

                    }
                });

            }

        });

Answer 1

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

我测试的 HTML ：

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

</datalist>

JQuery 我建议使用：

$(document).ready(function() {
  $("#prod_name").keyup(function() {
    $.ajax({
      method: "POST",
      url: "<?php echo site_url('kas/search_prod_name'); ?>",
      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 += "<option value='" v.name + "'>\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()对于此类应用程序来说变得很麻烦。您希望删除所有选项，或用您收到的任何新数据替换它们。在我的工作示例中，当按下某个键时，我们会看到：

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

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

<强>更新

我认为您可能错误地使用了<datalist>标记。它应该在页面加载时完全填充，而不是在输入文本后填充。点击此处：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

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

<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>

如果你真的想让它像JQuery UI的自动填充一样，你可以构建一个<ul>或<div>，其结果为里面的列表。按下某个键时将填充此列表，仅显示相关结果。例如，如果按下“L”，它将向PHP发送该值，该值将显示“Let's Go”以及以“L”开头的任何其他产品名称。它与<datalist>不同，后者在列表中查找包含“L”的任何内容。

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

1 个答案: