自作ファジイクエリ関数autoQuery

通常、私たちのプロジェクトでは、jqueryのようなautoCompleteプラグインを毎回ロードすると、余分な機能が使えず、Webページのロード量も増加するファジイクエリー機能がよく使用されます.そこで自分でfunction関数を書いて、使いたいときに呼び出せばいいので、とても便利で、コード量も少なく、基本的なあいまいなクエリー機能を実現することができます.
一、autoQuery紹介
AutoQuery関数は、3つのパラメータelem,url,param,すなわちautoQuery(elem,url,param)の入力をサポートします.
ここでelemはファジイクエリをバインドする要素オブジェクトであり、一般的にである.
urlは、取得するデータのajax要求のurlアドレス文字列です.例えば、'getQuery.json';
paramは、{value:elem.val()などのサーバ側に転送されるパラメータオブジェクトです.
二、autoQueryコード
(1)cssスタイル

    /*          */
    .auto-query-wrap {
        position: absolute;
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid #ddd;
        background: #fff;
        color: #333;
        padding-left: 0px;
        z-index: 9999;
    }
    
    .auto-query-wrap .query-item {
        position: relative;
        margin: 0;
        padding: 3px 1em 3px .4em;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
    .query-item:hover {
        background: #ddd;
    }
    /*          */

(2)jsコード(jqueryベース)

 //       
        function autoQuery(elem, url, param) {
            var position = {
                    top: elem.offset().top,
                    left: elem.offset().left,
                    width: elem.outerWidth(),
                    height: elem.outerHeight(),
                    getPosition: function() {
                        return {
                            top: this.top,
                            left: this.left,
                            width: this.width,
                            height: this.height
                        };
                    }
                },
                html = '<ul class="auto-query-wrap"></ul>',
                childList = '';

            $('.auto-query-wrap').remove();

            $('body').append(html);

            var obj = $('.auto-query-wrap');

            obj.css({
                top: position.getPosition().top + position.getPosition().height,
                left: position.getPosition().left,
                width: position.getPosition().width
            });

            //     
            var listArr = ['abc', 'ac', 'ad', 'ab', 'bc'];

            listArr.forEach(function(e) {
                childList += '<li class="query-item">' + e + '</li>'
            });

            obj.append(childList);

            // ajax  
            /*$.ajax({
                url: url,
                type: 'POST',
                data: param,
            })
            .done(function(data) {
                
                // data    
                data.forEach(function(e) {
                    childList += '<li class="query-item">' + e + '</li>'
                });

                obj.append(childList);
            })
            .fail(function() {
                alert('   :(');
            });*/

            $(document).on('click', '.query-item', function() {
                var txt = $(this).text();

                elem.val(txt);
            });

            $(document).on('click', function(e) {
                var target=$(e.target);

                if(target.closest(elem).length == 0){
                   obj.css('display', 'none');
                }
            });
        }

(3)バインドオブジェクトパラメータ(query_inputがオブジェクトのid)

$('#query_input').on('input', function() {
       var e = $(this),
           url = '/ajax_filter_metric/',
           param = {
                   'metric_text': e.val()
           };

       autoQuery(e /*, url, param*/);
});

 
三、autoQueryプレゼンテーション
プレゼンテーションのアドレスとソース:http://runjs.cn/code/qlqcqncf(静的データのみを実証し、実際の開発ではajax要求を呼び出してクライアント入力値に基づいて対応するクエリーデータを返す必要がある)
 
本人の技術が限られているため、コードに問題がある場合は、コメントを歓迎します.
オリジナル記事、転載は大根の穴から来ていることを明記してください-ブログ園[http://www.cnblogs.com/luozhihao]
本住所:http://www.cnblogs.com/luozhihao/p/5069842.html