jquery autocomplete 自己實現div達到輸入提示效果

 

應與需求，需要實現一個類似百度輸入提示的那種效果。然而這個項目有這樣的需求，原因是因爲本來原來的數據庫數據很亂，接到這個項目後對數據進行了加工，但是肯定會出現人名重複的問題，然而爲了檢索的唯一性，所有得動態取得用戶輸入的人名的authorsid，話不多說，常見的有2種方式。中間遇到一些問題，在次分享。

 

1、基於DIV的。

 ①html代碼（不在此全部貼出,需要的js會在附件中）

<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/autoquery.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>

 <input name="searchStr" id="searchStr" type="text" class="k" style="width: 220px;" onblur="javascript:hideBox();" onkeyup="javascript:queryMsg();" />
 <input type="hidden" name="authorsid" id="authorsid" value="<%=(null==request.getParameter("authorsid")) ? "" :request.getParameter("authorsid") %>" />

<p><input type="radio" name="searchCon" value="bookname" checked="checked">書名</p>
     <p><input type="radio" name="searchCon" value="timing">題名</p>
     <p><input type="radio" name="searchCon" value="zhuanjizerenzhe">原作者</p>
     <p><input type="radio" name="searchCon" value="authorName" >書評作者</p>
     <p><input type="radio" name="searchCon" value="publishYear">出版年</p>
     <p><input type="radio" name="searchCon" value="isbn">ISBN</p>
     <p><input type="radio" name="searchCon" value="keywords">英文主題詞</p>
     <p><input type="radio" name="searchCon" value="bookreviewCon">關鍵詞（全文）</p>

<div id="searchKcResult" class="searchResult"></div>（放最後，js裏面差的自己看着辦，我用着沒問題）

②java代碼統一在後面拿出來，差不多是一樣的。微笑區別

原理說明：這種實現方式是最容易想到的，如果你jquery用得不熟悉，比如我.當然在代碼實現上來看，有些自己寫不出來，是別人給我的一個插件，（會用就行，不一定是得非要自己能寫，"會用就行"）。

2、基於jquery autocomplete

①Html代碼

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<link rel="stylesheet" href="js/jquery.autocomplete.css" type="text/css"></link>

 <input name="searchStr" id="searchStr" type="text" class="k" style="width: 220px;"
               onkeyup="javascript:query();"/>
              
    <input type="hidden" name="authorsid" id="authorsid" value="<%=(null==request.getParameter("authorsid")) ? "" :request.getParameter("authorsid") %>" />
     <p><input type="radio" name="searchCon" value="bookname" checked="checked">書名</p>
     <p><input type="radio" name="searchCon" value="timing">題名</p>
     <p><input type="radio" name="searchCon" value="zhuanjizerenzhe">原作者</p>
     <p><input type="radio" name="searchCon" value="authorName" >書評作者</p>
     <p><input type="radio" name="searchCon" value="publishYear">出版年</p>
     <p><input type="radio" name="searchCon" value="isbn">ISBN</p>
     <p><input type="radio" name="searchCon" value="keywords">英文主題詞</p>
     <p><input type="radio" name="searchCon" value="bookreviewCon">關鍵詞（全文）</p>

②JS代碼

function query(){
 var searchCon = $("input[name='searchCon']:checked").val();
 var searchStr=$("#searchStr").val();
 if(searchStr!="" && searchCon=="authorName"){
  $.getJSON("display!findListAuthorByName.action",{"searchCon":searchCon,"authorName":encodeURI(searchStr)}, 

//encodeURI 處理傳遞參數是中文的問題，當然在服務器端也要做處理
   function(data){
    $('#searchStr').autocomplete(data, {
    max : 12, //參數不再說明，一搜一大把
    minChars : 1,
    width : 225,
    scrollHeight : 300,
    matchContains : true,
    autoFill : true,
    type: "json",
    parse : function (data){

//次方法是解析服務器端返回JSON格式的數據 我服務器端返回的就是JSON格式 所以用的是$.getJSON,如果不套在$.getJSON中，則服務器端返回的是將以行的形式，自己寫的時候不知道如何解析，在此只寫了json格式
     var rows=[];
     for(var i=0;i<data.length;i++){
      rows[rows.length]={
       data:data[i].cname+" "+data[i].officer+" "+data[i].keshi,
       value : data[i].cname,
       result : data[i].authorsid
      };
     }
     return rows;
    },
    formatItem : function(row, i, max) {
     return row.cname + " " + row.officer +" "+ row.keshi;
    },
    formatMatch : function(row, i, max) {
     return row.cname +" "+ row.officer+" "+row.keshi;
    },
    formatResult : function(row) {
     return row.cname;
    }
   }).result( function(event, row, formatted) {
    //alert(row.authorsid);//別alert() 死循環 再次給hidden賦值
   });
   }
  );
 }
}

說明：jquery autocomplete在我寫完這json後，感覺不是很好用，反應比較慢，或許是因爲嵌套在getJSON中

 

3 服務器端代碼

public String findListAuthorByName() throws IOException{
  HttpServletResponse response = ServletActionContext.getResponse();
  response.setContentType("application/json");
  response.setCharacterEncoding("UTF-8");
  response.setHeader("Cache-Control", "no-cache");
  PrintWriter pw= response.getWriter();
  if("".equals(authorName.trim()) || null==searchCon || !"authorName".equals(searchCon.trim())){//查詢條件不是authorName，並且沒有參數傳遞
   pw.print("");
   pw.flush();
   pw.close();
   return null;
  }

authorName=URLDecoder.decode(authorName,"utf-8");//這句如果你使用jquery autocomplete必須有，獲取你改成其他的，這主要是處理jquery傳遞過來的中午是%456這種編碼的，DIV就不用了

  List<Authors> lista = authorsService.findEntityListByLike("cname",authorName.trim());
  lista= lista.subList(0, (9 > lista.size()) ? lista.size() : 9);
  Dict dict=null;
  for(Authors authors : lista){
   String officer = authors.getOfficer();
   String keshi = authors.getKeshi();
   if(null!=officer && !"".equals(officer) ){
    dict = dictService.find(Integer.parseInt(officer));
    if(null!=dict){
     if("null".equalsIgnoreCase(dict.getDname())){
      authors.setOfficer("");
     }else{
      authors.setOfficer(dict.getDname());
     }
    }else{
     authors.setOfficer("");
    }
   }else{
    authors.setOfficer("");
   }
   if(null!=keshi && !"".equals(keshi) ){
    dict = dictService.find(Integer.parseInt(keshi));
    if(null!=dict){
     if("null".equalsIgnoreCase(dict.getDname())){
      authors.setKeshi("");
     }else{
      authors.setKeshi(dict.getDname());
     }
    }else{
     authors.setKeshi("");
    }
   }else{
    authors.setKeshi("");
   }
  }
  JSONArray jsonObject = JSONArray.fromObject(lista);
  String resultString = "";
  try {
   resultString = jsonObject.toString();
  } catch (Exception e) {
   resultString = "";
  }
  pw.print(resultString);
  pw.flush();
  pw.close();
  return null;
 }

 

 

還是在此說一些廢話吧，搞開發的不管怎麼樣你都要會寫JS，自己背不下來不要緊，重要的是你能夠在任務時間內完成，至於在面試的時候遇到JS的題，這就得看你寫過的了，記得那次面試的時候，那公司大部分是JS題，筆試後沒想回去，呵呵，慢慢覺得敲代碼也是需要你帶感情的！