輸入框提示自動提示類似百度,淘寶的輸入框

yn6e 9年前發布 | 2K 次閱讀 JavaScript jQuery

jquery autoComplete插件

1.需要的js和樣式(jquery 是必選的)

<script src="${ctx}/js/jquery/jquery-1.7.2.js" type="text/javascript"></script>
<script src="${ctx}/js/jquery/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
    <script src="${ctx}/js/jquery/jquery.ui.core.js" type="text/javascript"></script>
    <script src="${ctx}/js/jquery/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="${ctx}/js/jquery/jquery.ui.position.js" type="text/javascript"></script>
    <script src="${ctx}/js/jquery/jquery.ui.autocomplete.js" type="text/javascript"></script>
    <link href="${ctx}/js/jquery/css/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" />

2. js

    $("#pName").autocomplete({
                source: function(request, response ) {
                    $.ajax({
                        url: "${ctx}/xxxx/xxxxx.do",
                        dataType: "json",
                        data:{
                            name: request.term
                        },
                        success: function(data) {
                            response($.map(eval(data), function(item) {
                                return {
                                    uid:item.id,
                                    value:item.person.name+"-"+item.person.mobile
                                }
                            }));
                        }
                    });
                },
                minLength:1,
                select:function(event,ui) {
                    $("#pid").val(ui.item.uid);
                    $("#pName").val(ui.item.value);
                }
            });

3.jsp元素

<tr>
                <td><input type="text" id="pName" value=""/></td>
                <td><input type="hidden" id="pid"></td>
                <td><input type="button"  id="submitProjectPerson" value="添加成員"/></td>
                <td><span id="flagError" style="color:red"></span></td>
            </tr>
 本文由用戶 yn6e 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!