solr自動提示 - jquery ui autocomplete

時間 2019-11-20

標籤 solr 自動提示 jquery autocomplete 欄目 JQuery 简体版

原文原文鏈接

需求: 搜索框中輸入部分關鍵詞以後,有下拉聯想提示.選中提示,使用鼠標或者使用enter鍵,則觸發搜索功能.沒有選擇搜索提示,使用部分輸入關鍵詞做爲搜索,直接使用enter鍵也能觸發搜索功能.整個過程的實現,採用了jquery的跨域調用方式.javascript

 val = $("#retrival").val(); retrival(val == '' ? "*:*" : val); }); //綁定回車 搜索 $("#retrival").keydown(function(event) { if (event.keyCode == 13) { $(".ui-helper-hidden-accessible").empty(); var val = $("#retrival").val(); retrival(val); } }); $("#retrival") .autocomplete( { source : function(request, response) { var suggestUrl = baseURL + "/suggest?" + "q=" + request.term + "&wt=json"; suggestUrl = encodeURI(suggestUrl); $ .getJSON( suggestUrl + "&json.wrf=?", function(data) { //結果數據 data 爲json對象 if (data.spellcheck.suggestions.length > 1) { response(data.spellcheck.suggestions[1].suggestion); } }); }, minLength : 1, select : function(event, ui) { //alert('select'); console.info(event); $(".ui-helper-hidden-accessible").empty(); if (event.which != 13) {// 防止與 $("#city").keydown衝突 retrival(ui.item ? ui.item.label : this.value); } } }); }); </script> </head> <body> <div class="ui-widget"> <label>檢索: </label> <input id="retrival" /> <input id="commit" type="button" value="提交" /> </div> <div id="result"></div> </body> </html>

<!doctype html>
<html>
<head>
<meta name="content-type" content="text/html; charset=gbk" />
<title>solr autoComplete </title>
<link rel="stylesheet" href="lib/jquery-ui.css">
<script src="lib/jquery-1.11.2.js"></script>
<script src="lib/jquery-ui.js"></script>
<script type="text/javascript" src="lib/json3/json3.min.js"></script>
<style>
#city {
    width: 25em;
}
</style>
<script>
  var  baseURL = "http://172.21.0.31:13131/solr/jlyd";
  var search = 
  $(function() {
    // 檢索函數
    function retrival(keyword ) {
        //
        $("#result").empty();
　　　　// 若是後臺沒有設置json返回格式的話,這裏必定要設置json返回的格式.
        var selectURL = encodeURI(baseURL+"/select?"+"q="+(keyword==''? "*:*" : keyword)+"&wt=json");
        $.getJSON(selectURL + "&json.wrf=?", function(data) {
            // 對查詢結果處理
            var da = data.response.docs;
            if(da.length>0){
                for(var i=0;i<da.length;i++){
                    $("#result").append("<li>"+"("+(i+1)+")  "+da[i].doctitle+"</li>");
                }
            }else{
                $("#result").html("沒有結果");
            }
        });
    }
    
    //搜索按鈕觸發
    $("#commit").click(function(){
        $(".ui-helper-hidden-accessible").empty();
        var val = $("#retrival").val();
        retrival(val==''? "*:*" : val);
    });
    //綁定回車 搜索
    $("#retrival").keydown(function(event){
        if(event.keyCode == 13){
            $(".ui-helper-hidden-accessible").empty();
            var val = $("#retrival").val();
            retrival(val);
        }
    });
    $( "#retrival" ).autocomplete({
      source: function( request, response ) {
        var suggestUrl = baseURL+"/suggest?"+"q="+request.term+"&wt=json";
        suggestUrl = encodeURI(suggestUrl);
        $.getJSON(suggestUrl + "&json.wrf=?", function(data) {
            //結果數據  data 爲json對象
            if(data.spellcheck.suggestions.length>1){
                 response(data.spellcheck.suggestions[1].suggestion);
            }
        });
      },
      minLength: 1,
      select: function( event, ui ) {
          //alert('select');
          console.info(event);
          $(".ui-helper-hidden-accessible").empty();
          if(event.which != 13){// 防止與 $("#city").keydown衝突
              retrival( ui.item ? ui.item.label : this.value);
          }
      }
    });
  });
  </script>
</head>
<body>

    <div class="ui-widget">
        <label>檢索: </label> <input id="retrival" /> <input id="commit"
            type="button" value="提交" />
    </div>
    <div id="result"></div>
</body>
</html>

效果:css

相關標籤/搜索

autocomplete

提示

mvc+jquery+autocomplete

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。