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/

asp.net mvc 使用 Autocomplete 实现类似百度,谷歌动态搜索条提示框。的更多相关文章

  1. 在Winfrom下实现类似百度、Google搜索自能提示功能

    前记:数据源来自页面的一个ComboBox的数据源List<Contract>集合 页面放置一个TextBox(搜索框).ListBox(显示搜索出来的数据),ListBox位置位于Tex ...

  2. Asp.net mvc 4.0 高级编程 百度云下载

    Asp.net mvc 4.0 高级编程 百度云下载地址:链接:http://pan.baidu.com/s/1o6zFvOe 密码:xyss 1.基于 ASP.NET MVC4.0 + WebAPI ...

  3. jq实现百度图片移入移出内容提示框上下左右移动的效果

    闲来无聊,看到百度图片hover的时候提示框的效果,遂想试一试自己能否实现. 百度图片hover的效果: 需求: 1. 当鼠标从图片上部移入的时候,提示框从上部移到正常位置.从上部移出的时候,提示框从 ...

  4. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  5. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  6. ASP.NET MVC中三方登录: 微软、谷歌、Office365

    创建一个MVC的工程,在Startup.Auth.cs文件中,我们能看到这样的一些代码: 这其实是微软已经帮我们实现好的三方登录的接口,我们只需要创建相应的开发者账号,并在其中配置好跟我们应用程序相关 ...

  7. ArcGIS Server 10.2 实战(一)Asp.net MVC与JSON数据妙用实现动态生成要素图层

    今年7月刚刚发布的ArcGIS 10.2为GIS的web开发带来了一个很实在的功能,JSON转要素.以往GIS图层外部数据(如文本数据,数据库数据)动态地写入地图服务中的图层是一件不可想象的事情,如今 ...

  8. 在ASP.NET MVC中使用typeahead.js支持预先输入,即智能提示

    使用typeahead.js可以实现预先输入,即智能提示,本篇在ASP.NET MVC下实现.实现效果如下: 首先是有关城市的模型. public class City { public int Id ...

  9. ASP.NET MVC 在控制器中获取某个视图动态的HTML代码

    如果我们需要动态的用AJAX从服务器端获取HTML代码,拼接字符串是一种不好的方式,所以我们将HTML代码写在cshtml文件中,然后通过代码传入model,动态获取cshtml中的HTML代码 当然 ...

随机推荐

  1. Android官方技术文档翻译——开发工具的构建概述

    本文译自Android官方技术文档<Build Overview>,原文地址:http://tools.android.com/build. 因为<Android Lint Chec ...

  2. LeetCode之“动态规划”:Interleaving String

    题目链接 题目要求: Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example ...

  3. The 15th tip of DB Query Analyzer

    The 15th tip of DB Query Analyzer      ---- SQL Execute Schedule function is realized in 6.01 Ma Gen ...

  4. 修改win7系统sid

    百度百科定义: Windows使用SID来表示所有的安全对象(security principals).安全对象包括主机,域计算机账户,用户和安全组.名字Name是用来代表SID的一个方法,可以允许用 ...

  5. 百度编辑器上传视频音频的bug

    前言:UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码,百度Ueditor 支持多种后台语言上传 ...

  6. access窗口标签居中

    Private Sub Form_Resize() On Error Resume Next Me.Width = Me.InsideWidth Me.Section(acDetail).Height ...

  7. java开发区块链只需150行代码

    本文目的是通过java实战开发教程理解区块链是什么.将通过实战入门学习,用Java自学开发一个很基本的区块链,并在此基础上能扩展如web框架应用等.这个基本的java区块链也实现简单的工作量证明系统. ...

  8. java类定义、变量类型、构造函数

    1.java类class的定义 所有java程序都以类class为组织单元,java类由属性和方法组成,下面看例子: public  class  Phone{ //属性 String company ...

  9. SEO优化-robots.txt解读

    一.什么是robots.txt robots.txt 文件由一条或多条规则组成.每条规则可禁止(或允许)特定抓取工具抓取相应网站中的指定文件路径. 通俗一点的说法就是:告诉爬虫,我这个网站,你哪些能看 ...

  10. arcgis api for flex 除去 esri map控件中的logo标志

    在程序的applicationComplete方法中添加下列代码 private function reallyHideESRILogo(map : Map) : void { for(var i : ...