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="请输入小区名称">