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/

 

转载于:https://www.cnblogs.com/liluping860122/archive/2013/05/25/3099077.html