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

Add result to Search Field for Auto Suggest

本文关键字：搜索 字段 结果 添加      更新时间：2023-09-26

我已经做了一个从文本文件中获取类别，该文件工作正常，下面是执行传统搜索内容的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' />

您可以使用

html5功能数据列表： 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-回调中创建 datalist-元素（当您有数据时）。

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

相关文章：