jQuery效果 autoComplete 输入框自动提示效果
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。当您在输入域中输入时,自动完成(Autocomplete)部件提供相应的建议。
https://pan.baidu.com/s/1c226XqS
http://www.runoob.com/jqueryui/example-autocomplete.html
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<!--
<link rel="stylesheet" href="http://www.runoob.com/try/demo_source/jqueryui/style.css"> -->
<script type="text/javascript">
function queryEstate() {
// label 下拉提示显示的内容
// value 选中之后在输入框中显示的值
// id address 是自定义的变量
var availableTags = [
{"label":"朗诗未来街区","value":"朗诗未来街区","id":1,"address":"夷浜路77号"},
{"label":"中海国际社区","value":"中海国际社区","id":2,"address":"琉璃街166号"}
];
// source 下拉体术数据源
// select 在选中后触发
$('#estateName').autocomplete({
source: availableTags,
select: function( event, data ) {
$("#estateId").html(data.item.id);
$("#estateAddr").html(data.item.address);
}
});
}
</script>
<link rel="stylesheet" href="${ctx}/static/project/css/dropzone.css">
<BR><BR>
estateId is <span id="estateId"></span>
estateAddr is <span id="estateAddr"></span>
<BR><BR>
请输入小区名字:
<input type="text" id="estateName" name="estateName" onkeyup="queryEstate()" placeholder="请输入小区名称">
分享到:
相关推荐
Jquery AutoComplete
jquery autocomplete下载.rar
在输入页面利用JQuery获取用户输入,然后通过AJAX异步发送到处理页面,...若是jquery autoComplete组件则只要将从后台获取的数据放入autocomplete( url or data, [options] )第一个参数中就行,第二个参数可加可不加。
jquery autocomplete 动态补全例子支持中文 ajax传递json数据 文件里有json数据拼接
JQuery autocomplete ajax分页,对源码稍微修改了下
jQuery Autocomplete,百度搜索框提示效果。
jquery autocomplete.js 是一款优秀的开源JS,支持自动完成,不过如果是中文失效。原因是由于中文编码不一致引起的,修改源文件中AJAX请求中的编码,加上escape编码后,在后台用Server.URLDecode解码后,则中文也...
jquery-autocomplete搜索框自动完成的中文文档,上手快,轻便,功能强大
jQuery Autocomplete plugin是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入提示功能,而且示例本身...
Jquery autocomplete插件使用
jquery autocomplete官方版(源代码+示例) 自动补充功能非常实用
jquery autocomplete 所需js文件及样式。 实现仿百度输入查询下拉功能。
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
使用Jquery AutoComplete 插件来做自动填充功能,包含本地数组,后台数据等情况
jQuery autocomplete 自动加载
NULL 博文链接:https://bask.iteye.com/blog/766441
asp.net 仿google 只能搜索提示,提供源码,自带数据库。
jquery自动补全插件(jquery autocomplete) 内包含使用说明,前台+后台
PHP jquery autocomplete实现 解决中文乱码,上下键移动等功能