Question

我已经制作了一个从文本文件中获取类别的工作正常，下面是HTML搜索表单，它执行传统的搜索工作（再次正常工作）。我必须将结果（这是一个数组）显示为类似于流行搜索引擎的自动建议，我知道如何迭代结果循环但我不能想如何将其显示为autosuggest。我没有使用普遍使用的jquery-ui auto建议，因为我想要我的努力。

任何人都可以提示我如何将此结果显示为自动建议吗？

JS

<script>
   var mcats = '';
   var result = new Array();
   $.get('http://dev-m.xxxx.com/location/mcats_24-11-2014.txt', function(data){
      //console.clear();
        console.log("Reading Local File..");
        mcats = data.split("\n");
      //console.log(mcats);

        $("#mainSearch").keyup(function(event){
           if($("#mainSearch").val().length>=3){
              console.clear();
              $("#input").html('');
              $("#input").html($("#mainSearch").val() + "  " + $("#mainSearch").val().length);
              var tobe = $("#mainSearch").val();

              for(var i=0;i<mcats.length;i++){ 
                   if(mcats[i].indexOf(tobe)>-1){
                        //  console.log(arr[i].indexOf(tobe));
                        result.push([ mcats[i], mcats[i].indexOf(tobe)]);
               }
           }
           result = result.sort(function(a,b) {
           return a[1] > b[1];
        });
        console.log(result);
      }
  });
});

HTML

<form id='search' action='' method='POST'>
<label for="mainSearch"><b>Enter Keyword: </b></label>
<input type='text' name='mainSearch' id='mainSearch' />
<input type='Submit' value='Search' />

Answer 1

您可以使用html5-feature数据列表：http://www.w3schools.com/tags/tag_datalist.asp

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

要将它与您自己的自动完成数据相关联，请在ajax-callback中创建datalist-element（当您有数据时）。

http://jsfiddle.net/hkLj9mxo/1/

将结果添加到“自动建议”的“搜索字段”

1 个答案: