jquery autocomplete

jQuery效果 autoComplete 输入框自动提示效果

根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。当您在输入域中输入时，自动完成（Autocomplete）部件提供相应的建议。

[url]https://pan.baidu.com/s/1c226XqS[/url]

[url]http://www.runoob.com/jqueryui/example-autocomplete.html[/url]

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