请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
yn6e
10年前发布

输入框提示自动提示类似百度,淘宝的输入框

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>