bigautocomplete實現聯想輸入，自動補全

時間 2019-11-17

標籤 bigautocomplete 實現聯想輸入自動補全简体版

原文原文鏈接

一、bigautocomplete是一款Jquery插件

二、效果圖：

三、如何實現

3.一、接下來就是實現，必須引入2個文件

引入jquery.bigautocomplete.js和jquery.bigautocomplete.css文件到你的頁面中。css

<link rel="stylesheet" href="/plugins/bigautocomplete/jquery.bigautocomplete.css">
<script src="/plugins/bigautocomplete/jquery.bigautocomplete.js"></script>

3.二、參數說明：

$("xxxxx").bigAutocomplete({data:[...],url:"",width:0,callback:{}})html

參數	是否必須	說明
data	非必須	格式{data:[{title:null,result:{}},{title:null,result:{}}]}
url	非必須	url爲字符串，用來ajax後臺獲取數據，返回的數據格式爲data參數同樣。
url和data	兩個參數必須有一個	且只有一個生效，data優先。
width	非必須	下拉框的寬度，默認使用輸入框寬度。
callback	非必須	選中行後按回車或單擊時回調的函數，用於返回選中行的其餘數據及作一些操做。

四、具體本地示例

<label class="label-12" for="company_Name">企業名稱</label>
 <input type="text" class="form-control input-sm margin-r-5 margin-b-5" name="company_Name"
                                       id="company_Name" placeholder="企業名稱..."  >
  <input type="hidden" id="company_Id">

$(function () {

        $("#company_Name").bigAutocomplete({
            width:258,
            url:'/distribution/getCompanyName',
            callback:function(data){
                alert(data.result);
                $('#company_Id').val(data.result.companyId);
            }
        });
        
    });

五、解釋

這裏輸入引用文本採用url ajax後臺取數方式獲取下拉效果jquery

這就是後臺url 地址：ajax

'/distribution/getCompanyName',json

六、後端代碼

@RequestMapping(value = "getCompanyName")
    public String getCompanyName(String keyword){
        logger.info("列表界面查詢企業請求數據參數：companyName:   "+   keyword);
        Map<String,Object> param = new HashMap<>();
        param.put("companyName", keyword);
        Map<String,Object> data =  distributionService.getCompanyName(param);
        return GsonUtils.objectToJson(data);
    }

public Map<String,Object> getCompanyName(Map<String, Object> param) {
        ServiceResponse.Data data = this.getResponseData("/distribution/getAllLikeEntripriseList",param);
        Map<String,Object> respMap = (Map<String, Object>)data.getItems();
        return respMap;

    }

    public ServiceResponse getAllLikeEntripriseList(Map<String, Object> paramMap) {

        ServiceResponse response = uCenterService.getCompanyName(paramMap);

        if (EnumStatusCode.U_000000.getCode().equals(response.getMeta().getStatus())) {
            Map<String, Object> resultList = (Map<String, Object>) response.getData().getItems();

            if (resultList != null && resultList.size() > 0) {
                List<Map<String, Object>> companyList = (List<Map<String, Object>>) resultList.get("list");
                List<Map<String, Object>> companyresultList = new ArrayList<>();
                for(Map<String, Object> resultMap : companyList){
                    Map<String, Object> RESULT = new HashMap<>();
                    RESULT.put("title",resultMap.get("companyName"));
                    Map<String, Object> ids = new HashMap<>();
                    ids.put("companyId",resultMap.get("companyId"));
                    RESULT.put("result",ids);
                    companyresultList.add(RESULT);
                }

                Map<String, Object> RESULT = new HashMap<>();
                RESULT.put("data",companyresultList);
                response.getData().setItems(RESULT);

            }
        }

        return response;

    }

七、最後送上bigautocomplete 的css和js

js：後端

/**
 * Created by shenjd (shenjd@51lick.com) on 2017/8/26.
 */

(function($){
    var bigAutocomplete = new function(){
        this.currentInputText = null;//目前得到光標的輸入框（解決一個頁面多個輸入框綁定自動補全功能）
        this.functionalKeyArray = [9,20,13,16,17,18,91,92,93,45,36,33,34,35,37,39,112,113,114,115,116,117,118,119,120,121,122,123,144,19,145,40,38,27];//鍵盤上功能鍵鍵值數組
        this.holdText = null;//輸入框中原始輸入的內容

        //初始化插入自動補全div，並在document註冊mousedown，點擊非div區域隱藏div
        this.init = function(){
            $("body").append("<div id='bigAutocompleteContent' class='bigautocomplete-layout'></div>");
            $(document).bind('mousedown',function(event){
                var $target = $(event.target);
                if((!($target.parents().andSelf().is('#bigAutocompleteContent'))) && (!$target.is(bigAutocomplete.currentInputText))){
                    bigAutocomplete.hideAutocomplete();
                }
            })

            //鼠標懸停時選中當前行
            $("#bigAutocompleteContent").delegate("tr", "mouseover", function() {
                $("#bigAutocompleteContent tr").removeClass("ct");
                $(this).addClass("ct");
            }).delegate("tr", "mouseout", function() {
                $("#bigAutocompleteContent tr").removeClass("ct");
            });


            //單擊選中行後，選中行內容設置到輸入框中，並執行callback函數
            $("#bigAutocompleteContent").delegate("tr", "click", function() {
                bigAutocomplete.currentInputText.val( $(this).find("div:last").html());
                var callback_ = bigAutocomplete.currentInputText.data("config").callback;
                if($("#bigAutocompleteContent").css("display") != "none" && callback_ && $.isFunction(callback_)){
                    callback_($(this).data("jsonData"));

                }
                bigAutocomplete.hideAutocomplete();
            })

        }

        this.autocomplete = function(param){

            if($("body").length > 0 && $("#bigAutocompleteContent").length <= 0){
                bigAutocomplete.init();//初始化信息
            }

            var $this = $(this);//爲綁定自動補全功能的輸入框jquery對象

            var $bigAutocompleteContent = $("#bigAutocompleteContent");

            this.config = {
                //width:下拉框的寬度，默認使用輸入框寬度
                width:$this.outerWidth() - 2,
                //url：格式url:""用來ajax後臺獲取數據，返回的數據格式爲data參數同樣
                url:null,
                /*data：格式{data:[{title:null,result:{}},{title:null,result:{}}]}
                 url和data參數只有一個生效，data優先*/
                data:null,
                //callback：選中行後按回車或單擊時回調的函數
                callback:null};
            $.extend(this.config,param);

            $this.data("config",this.config);

            //輸入框keydown事件
            $this.keydown(function(event) {
                switch (event.keyCode) {
                    case 40://向下鍵

                        if($bigAutocompleteContent.css("display") == "none")return;

                        var $nextSiblingTr = $bigAutocompleteContent.find(".ct");
                        if($nextSiblingTr.length <= 0){//沒有選中行時，選中第一行
                            $nextSiblingTr = $bigAutocompleteContent.find("tr:first");
                        }else{
                            $nextSiblingTr = $nextSiblingTr.next();
                        }
                        $bigAutocompleteContent.find("tr").removeClass("ct");

                        if($nextSiblingTr.length > 0){//有下一行時（不是最後一行）
                            $nextSiblingTr.addClass("ct");//選中的行加背景
                            $this.val($nextSiblingTr.find("div:last").html());//選中行內容設置到輸入框中

                            //div滾動到選中的行,jquery-1.6.1 $nextSiblingTr.offset().top 有bug，數值有問題
                            $bigAutocompleteContent.scrollTop($nextSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $nextSiblingTr.height() );

                        }else{
                            $this.val(bigAutocomplete.holdText);//輸入框顯示用戶原始輸入的值
                        }


                        break;
                    case 38://向上鍵
                        if($bigAutocompleteContent.css("display") == "none")return;

                        var $previousSiblingTr = $bigAutocompleteContent.find(".ct");
                        if($previousSiblingTr.length <= 0){//沒有選中行時，選中最後一行行
                            $previousSiblingTr = $bigAutocompleteContent.find("tr:last");
                        }else{
                            $previousSiblingTr = $previousSiblingTr.prev();
                        }
                        $bigAutocompleteContent.find("tr").removeClass("ct");

                        if($previousSiblingTr.length > 0){//有上一行時（不是第一行）
                            $previousSiblingTr.addClass("ct");//選中的行加背景
                            $this.val($previousSiblingTr.find("div:last").html());//選中行內容設置到輸入框中

                            //div滾動到選中的行,jquery-1.6.1 $$previousSiblingTr.offset().top 有bug，數值有問題
                            $bigAutocompleteContent.scrollTop($previousSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $previousSiblingTr.height());
                        }else{
                            $this.val(bigAutocomplete.holdText);//輸入框顯示用戶原始輸入的值
                        }

                        break;
                    case 27://ESC鍵隱藏下拉框

                        bigAutocomplete.hideAutocomplete();
                        break;
                }
            });

            //輸入框keyup事件
            $this.keyup(function(event) {
                var k = event.keyCode;
                var ctrl = event.ctrlKey;
                var isFunctionalKey = false;//按下的鍵是不是功能鍵
                for(var i=0;i<bigAutocomplete.functionalKeyArray.length;i++){
                    if(k == bigAutocomplete.functionalKeyArray[i]){
                        isFunctionalKey = true;
                        break;
                    }
                }
                //k鍵值不是功能鍵或是ctrl+c、ctrl+x時才觸發自動補全功能
                if(!isFunctionalKey && (!ctrl || (ctrl && k == 67) || (ctrl && k == 88)) ){
                    var config = $this.data("config");

                    var offset = $this.offset();
                    $bigAutocompleteContent.width(config.width);
                    var h = $this.outerHeight() - 1;
                    $bigAutocompleteContent.css({"top":offset.top + h,"left":offset.left});

                    var data = config.data;
                    var url = config.url;
                    var keyword_ = $.trim($this.val());
                    if(keyword_ == null || keyword_ == ""){
                        bigAutocomplete.hideAutocomplete();
                        return;
                    }
                    if(data != null && $.isArray(data) ){
                        var data_ = new Array();
                        for(var i=0;i<data.length;i++){
                            if(data[i].title.indexOf(keyword_) > -1){
                                data_.push(data[i]);
                            }
                        }

                        makeContAndShow(data_);
                    }else if(url != null && url != ""){//ajax請求數據
                        $.post(url,{keyword:keyword_},function(result){
                            makeContAndShow(result.data)
                        },"json")
                    }


                    bigAutocomplete.holdText = $this.val();
                }
                //回車鍵
                if(k == 13){
                    var callback_ = $this.data("config").callback;
                    if($bigAutocompleteContent.css("display") != "none"){
                        if(callback_ && $.isFunction(callback_)){
                            callback_($bigAutocompleteContent.find(".ct").data("jsonData"));
                        }
                        $bigAutocompleteContent.hide();
                    }
                }

            });


            //組裝下拉框html內容並顯示
            function makeContAndShow(data_){
                if(data_ == null || data_.length <=0 ){
                    return;
                }

                var cont = "<table><tbody>";
                for(var i=0;i<data_.length;i++){
                    cont += "<tr><td><div>" + data_[i].title + "</div></td></tr>"
                }
                cont += "</tbody></table>";
                $bigAutocompleteContent.html(cont);
                $bigAutocompleteContent.show();

                //每行tr綁定數據，返回給回調函數
                $bigAutocompleteContent.find("tr").each(function(index){
                    $(this).data("jsonData",data_[index]);
                })
            }


            //輸入框focus事件
            $this.focus(function(){
                bigAutocomplete.currentInputText = $this;
            });

        }
        //隱藏下拉框
        this.hideAutocomplete = function(){
            var $bigAutocompleteContent = $("#bigAutocompleteContent");
            if($bigAutocompleteContent.css("display") != "none"){
                $bigAutocompleteContent.find("tr").removeClass("ct");
                $bigAutocompleteContent.hide();
            }
        }

    };


    $.fn.bigAutocomplete = bigAutocomplete.autocomplete;

})(jQuery)

css:數組

@charset "utf-8";
.bigautocomplete-layout{display:none;background-color:#FFFFFF;border:1px solid #BCBCBC;position:absolute;z-index:9999 !important;max-height:220px;overflow-x:hidden;overflow-y:auto; text-align:left;}
.bigautocomplete-layout table{border-collapse:collapse;border-spacing:0;background:none repeat scroll 0 0 #FFFFFF;width:100%;cursor:default;}
.bigautocomplete-layout table tr{background:none repeat scroll 0 0 #FFFFFF;}
.bigautocomplete-layout .ct{background:none repeat scroll 0 0 #D2DEE8 !important;}
.bigautocomplete-layout div{word-wrap:break-word;word-break:break-all;padding:1px 5px;}