asp.net mvc 使用 Autocomplete 實現類似百度，谷歌動態搜索條提示框。

Autocomplete是一個Jquery的控件，用法比較簡單。

大家先看下效果：

當文本框中輸入內容，自動檢索數據庫給出下拉框進行提示功能。
需要用此控件大家先到它的官方網站進行下載最新版本：

http://jqueryui.com/autocomplete/

 下載完后，我們需要用到2個文件，在需要的界面中引入他的js包和樣式表文件。如下：

<link href="../Scripts/jquery-autocomplete-new/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-autocomplete-new/jquery.autocomplete.js" type="text/javascript"></script>

因為此控件是基於Jquery的，所以必不可少的要引入jquery的開發包。注意，jquery的開發包必須要在Autocomplete的js包之前。

然后我們會在后台寫一個Action方法供輸入文字時調用，最終返回一個數據集，生成下拉選擇框。

//動態加載數據的方法
        public ActionResult GetDrugList(String q)
        {
            String[] PostStrs = 數據庫操作，獲取需要顯示的數據;
    
            return Content(string.Join("\n", PostStrs));
        }    

q為參數，就是頁面中文本框輸入的內容。

最后我們頁面有個文本框，當文本框輸入內容時執行方法調用Action並返回數據附加到文本框下進行選擇。

<input type="text" id="Drug" name="Drug" style=" width:400px;"/>

<script type="text/javascript" language="javascript"> 
$(document).ready(function () {
    $("#Drug").autocomplete('/Home/GetDrugList', '');
 )};
</script>

第一個參數是調用的Action的url 根據情況自行設定。
至此一個類似百度谷歌的自動檢索控件就完了，很簡單、很實用、很方便。當然它有很多屬性可以設置，具體屬性及說明請大家參考官方文檔：http://jqueryui.com/autocomplete/