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

Question

1. 我想创建一个自动填充搜索框。它获取 JSON 并将其发送到 HTML5 <datalist>的<option> s。

它工作正常，但它不能在值中使用空格!所以它只返回第一个单词。例如，如果 jresults.name是“让我们走吧”——我只得到“让我们”。

执行此操作的最佳方法是什么？

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

第二部分是提交表单后我想获取选择的对象的 id。 ( jresults.id )，我不知道如何通过提交检索它。

我的代码:

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

                    }
                });

            }

        });

HTML 部分(使用 codeigniter 语法的形式:

<?php 
    $attributes = array('class' => 'prod_name', 'id' => 'prod_name', 'name' => 'prod_name', 'list' => 'prod_name_list');


        echo form_input('prod_name',  'prod Name', $attributes);    
    ?>

    <datalist id="prod_name_list"> 


    </datalist>

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，PHP 将显示“Let's Go”以及以“L”开头的任何其他产品名称。它与 <datalist> 不同它会在列表中查找包含“L”的任何内容。