添加結果到搜索字段的自動推薦

我做了一個這樣的從一個文本文件中取得類別的工作正常，下面是傳統搜索的東西（工作正常）的HTML搜索表單。我必須顯示結果（這是一個數組）作爲自動建議類似於流行的搜索引擎，我知道如何迭代結果循環，但我不認爲應該如何顯示這個自動建議。我沒有使用廣泛使用的jquery-ui auto建議，因爲我想在這方面做出努力。添加結果到搜索字段的自動推薦

任何人都可以提示我如何顯示這個結果作爲自動建議？

<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' />

來源

2014-11-24 MixedVeg

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

來源

2014-11-24 13:37:17

喜@Johannes我知道DataList的標籤，但我想更好的選擇，那麼這一點。 datalist不支持自定義css此外，這將創建一個下拉列表，必須由用戶打開，而不是我想要打開並自動調整所有選項的大小！ – MixedVeg 2014-11-25 03:41:42

添加結果到搜索字段的自動推薦

回答

相關問題