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

Question

我做了一个从文本文件中获取类别的文件，它工作正常，下面是执行传统搜索内容的 HTML 搜索表单（再次正常工作）。我必须将结果（这是一个数组）显示为类似于流行搜索引擎的自动建议，并且我知道如何迭代结果循环，但我不知道应该如何将其显示为自动建议。我没有使用常用的 jquery-ui 自动建议，因为我希望在这方面做出努力。

谁能提示我如何将此结果显示为自动建议？

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/