輸入框提示自動提示類似百度,淘寶的輸入框
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 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!