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. UML之时序图

            时序图,英文名曰:Sequence Diagram,也称顺序图和序列图,是一种行为图,她通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作.她可以表示用例的行为顺序,当执行一 ...

  2. Java进阶(十三)servlet监听器

    servlet监听器 Listener是Servlet的监听器,它可以监听客户端的请求.服务端的操作等.通过监听器,可以自动激发一些操作,比如监听在线的用户的数量.当 增加一个HttpSession时 ...

  3. MongoDB 3.0新增特性一览

    转自:http://blog.sina.com.cn/s/blog_48c95a190102vedr.html 引言 在历经版本号修改(2.8版本直接跳到3.0版本)和11个rc版本之后,MongoD ...

  4. obj-c编程15[Cocoa实例01]:一个会发声的随机数生成器

    哇!终于到了obj-c编程系列的第15篇喽,一路走过来满不容易的哦!(怎么个意思,这才哪到哪啊!),为了能够更好的练习obj-c在Cocoa框架上的编程,接下来会以N篇Cocoa实例的博文来巩固和记忆 ...

  5. 杭电ACM 1004题

    原题大概意思就是统计输入字符串中,重复的最大个数! import java.util.Scanner; public class Main { public static void main(Stri ...

  6. rails常用命令备忘

    rails new xxx 创建一个新rails项目 rails generate scaffold xxx 创建表模型,视图,控制器和迁移的"脚手架" rake db:migra ...

  7. Jedis对Redis的常用命令操作

    本篇主要总结一些Jedis对Redis的常用命令操作: 1.对key操作命令 2.对String操作命令 3.对List操作命令 4.对Set操作命令 5.对Hash操作命令 6.排序操作指令 一.项 ...

  8. sqlite 数据类型 <转>

    一般数据采用的固定的静态数据类型,而SQLite采用的是动态数据类型,会根据存入值自动判断.SQLite具有以下五种数据类型: 1.NULL:空值.2.INTEGER:带符号的整型,具体取决有存入数字 ...

  9. 面试题-一个for循环输出一个棱形

    用一个for循环输出以下棱形 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ...

  10. Android之动画

    Android的动画可以分为三种,View动画.帧动画.属性动画.View动画通过对场景里的对象不断做图像变化(平移.缩放.旋转.透明度)从而产生动画效果,它是一种渐进式动画,而且View动画支持自定 ...