使用jQuery-UI来实现一个Ajax的自动完成功能(自动填充搜索框的下拉值)
首先你要在.net拓展包中去搜索 jquery ui (Combined Libray)安装这么个文件
第二部 在控制器中添加我们根据输入搜索框的值获取符合的记录集的action
第三步 有了数据集,就该去画我们的页面了
第四步 修改我们的js文件
具体效果就是这样的 如图:(不知道为什么我的ui样式有点丑)
但是这样 还需要选择某一项,再点击搜索,很繁琐的。。。我们想实现选中之后 直接得到搜索页
第五步 再次修改我们的js文件
这样就实现了你一选,然后就出现了搜索结果,一步到位。
使用jQuery-UI来实现一个Ajax的自动完成功能(自动填充搜索框的下拉值)的更多相关文章
- Jquery学习笔记:操作form表单元素之一(文本框和下拉框)
一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步, ...
- 通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery实现的3个基础案例(仿QQ列表分组,二级联动下拉框,模拟员工信息管理系统)
1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...
- 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Ajax跨域:Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- JQuery对单选框,复选框,下拉菜单的操作
JSP <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...
- 关于mui中一个页面有有多个页签进行切换的下拉刷新加搜索问题
此图是最近做的项目中的一页,用的是mui结合vue,用了mui后,觉得是真心难用啊,先不说其他的,就光这个下拉刷新就让人奔溃了,问题层出不穷,不过最后经过努力还是摆平了哈. 1.每次切换到新的标签,都 ...
- iosselect:一个js picker项目,在H5中实现IOS的下拉效果
iosselect是在webapp下的一个picker组件,可以轻松实现各类选择器效果.比如地区选择 时间选择 日期选择等. 下面是一个地址选择器demo截图,可以访问:http://zhoushen ...
- tableview中在tableheaderView上放一个视图,第一次进入视图显示不正常,往下拉视图仍然不正常,往上拉视图正常
解决办法: frame来源不正常,从直接在viewDidLoad方法中设置的frame,改为 - (void)viewDidLayoutSubviews { [super viewDidLayoutS ...
随机推荐
- linux 下 I/O 多路复用初探
本文内容整理自B站up主 free-coder 发布的视频:[并发]IO多路复用select/poll/epoll介绍 引入 一般来讲,服务器在处理IO请求(一般指的是socket编程)时,需要对so ...
- sed 找出含有某个字符串的行 注释掉
1.源文件例子 [root@node1 ~]# cat /etc/fstab # # /etc/fstab # Created by anaconda on Mon Mar 1 18:32:15 20 ...
- Centos 6.8 系统下安装RabbitMQ方法
一,安装 RabbitMQ 首先要先安装 erlang 1,到erlang官网下载 OTP 19.0 Source File 2,解压 tar zvxf otp_src_19.0.tar.gz 3,c ...
- webpack learn1-webpack-dev-server的配置和使用3
首先输入命令来安装webpack-dev-server npm i webpack-dev-server 在package.json文件中添加代码: "scripts": { &q ...
- 试玩Aid Learning
前言 记录一下步骤 下载安装 github官网 切换源 ## 打开Terminal复制回车即可 cd /etc/apt/&& cp sources.list sources.list. ...
- javascript 求最大前5个数; 对象 深拷贝 deep copy
* 用数组 function getTopN(a, n) { function _cloneArray(aa) { var n = aa.length, a = new Array(n); for ( ...
- Appium Capability使用进阶
- 字体小于12px 无法缩小解决方案
通过缩放进行大小控制. 缩放可能会导致元素也进行缩放.需要注意 transform: scale(0.5);
- Python创建Excel表格,Word并写入数据
from tkinter import Tk from time import sleep from tkinter.messagebox import showwarning import win3 ...
- P4716-[模板]最小树形图
正题 题目链接:https://www.luogu.com.cn/problem/P4716 题目大意 给出\(n\)个点\(m\)条边的一张有向图,求以\(r\)为根的最小外向树. \(1\leq ...