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/


 

posted @ 2013-05-25 17:12  李路平  阅读(6564)  评论(0编辑  收藏  举报