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