2014-11-24 79 views
0

我做了一个这样的从一个文本文件中取得类别的工作正常,下面是传统搜索的东西(工作正常)的HTML搜索表单。我必须显示结果(这是一个数组)作为自动建议类似于流行的搜索引擎,我知道如何迭代结果循环,但我不认为应该如何显示这个自动建议。我没有使用广泛使用的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' /> 

回答

0

你可以使用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/

+0

喜@Johannes我知道DataList的标签,但我想更好的选择,那么这一点。 datalist不支持自定义css此外,这将创建一个下拉列表,必须由用户打开,而不是我想要打开并自动调整所有选项的大小! – MixedVeg 2014-11-25 03:41:42