jquery autocomplete
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="请输入小区名称">
相关推荐
gufudhn 2020-06-12
yaohustiAC 2019-12-27
pythonclass 2019-11-07
geminihr 2015-03-19
仲崇峰 2015-06-02
83453065 2015-07-22
hubowei 2015-07-22
原為簡單 2017-02-21
87433764 2017-02-21
小肖 2017-05-12
delmarks 2017-02-21
yesbuy00 2017-02-08
85403969 2016-10-25
gamecalo 2016-10-08
Web全栈笔记 2016-10-08
Kindlecode 2016-05-25
limengmeng00 2015-07-22