zoukankan      html  css  js  c++  java
  • 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=" 400px;"/>
    <script type="text/javascript" language="javascript"> 
    $(document).ready(function () {
        $("#Drug").autocomplete('/Home/GetDrugList', '');
     )};
    </script>

    第一个参数是调用的Action的url 根据情况自行设定。
    至此一个类似百度谷歌的自动检索控件就完了,很简单、很实用、很方便。当然它有很多属性可以设置,具体属性及说明请大家参考官方文档:http://jqueryui.com/autocomplete/


     

  • 相关阅读:
    Java知识点:javac命令
    Java知识点:内部类
    证明:寝室分配问题是NPC问题
    Java知识点:Object类
    Java 知识点:序列化
    Python3玩转儿 机器学习(2)
    Python3玩转儿 机器学习(1)
    python re模块findall使用
    百度URL 部分参数
    python datetime模块
  • 原文地址:https://www.cnblogs.com/liluping860122/p/3099077.html
Copyright © 2011-2022 走看看