Implementierung einer intelligenten Eingabeaufforderungssteuerung basierend auf jquery intellSeach.js_jquery

1. Nachfrage

Wir stoßen häufig auf die Notwendigkeit einer [Site-Suche]. Um die Benutzererfahrung zu verbessern, hoffen wir, intelligente Eingabeaufforderungen wie die von Baidu in Echtzeit zu erreichen. Wenn Sie beispielsweise im Personalverwaltungssystem eines Unternehmens nach Li XX suchen möchten, geben Sie einfach „Li“ ein. Das System fordert dann automatisch einige Mitarbeiter mit dem Namen Li auf, was für Benutzer praktisch ist. Um es ganz klar auszudrücken: Das System zeigt relevante Ergebnisse an, während der Benutzer auf das Suchfeld klickt. Beispielsweise werden 360 und Baidu die wichtigsten Nachrichten oder Inhalte von heute mit einer großen Suche anzeigen Volumen.

jquery verfügt bereits über ein solches Plug-in namens Autocomplete, aber ich glaube nicht, dass es einfach zu verwenden ist. Es gibt auch viele Einführungen in die Autovervollständigung. Interessierte Freunde können es ausprobieren.

Wie Sie dem Titel entnehmen können, handelt es sich hier lediglich um ein Plug-in, in dem nicht auf die relevanten Algorithmen und Prozesse der Hintergrundsuche eingegangen wird. Mit anderen Worten: Der Hintergrund gibt Daten in einem bestimmten Format zurück, für das die Steuerung verantwortlich ist Rendering der Ergebnisse. Ok, schauen wir uns zuerst die Renderings an:

　

Der Stil hat nichts mit dem Steuerelement zu tun, es wird lediglich ein Eingabetext benötigt.

2. Parameterbeschreibung

Die Steuerung verwendet das JSON-Format als Übertragungsformat. Es gibt viele Parameter, von denen die meisten Standardwerte haben (Einzelheiten finden Sie im Quellcode). Einige werden möglicherweise nicht häufig verwendet. Behalten Sie daher einfach die Standardwerte bei. Wie folgt:

　 URL: Adresse anfordern. Zum Beispiel: Handler.ashx, die Adresse zum Abrufen von Daten im Hintergrund

 Eigenschaft: Die Eigenschaft des anzuzeigenden JSON-Objekts. Wenn wir die Form ["tom", "tom cat", "tom2"] direkt zurückgeben, muss dieses Attribut nicht festgelegt werden, aber manchmal geben wir [{"Name": "tom", "ID" zurück: „ 001“},{“Name“: „tom cat“, „ID“: „002“}, {“Name“: „tom2“, „ID“: „003“}] In diesem Formular wird Name angezeigt. Setzen Sie diese Eigenschaft dann auf „Name“. Für die ID des angeklickten Elements, die wir beim Klicken erhalten möchten, können wir das Click-Ereignis verwenden.

  itemNumber: Die Anzahl der angezeigten Elemente.

  isEmptyRequest: Ob eine Anfrage initiiert werden soll, wenn leer. Wenn Sie, wie bereits erwähnt, Inhalte empfehlen möchten, wenn Sie auf das Suchfeld klicken (derzeit ist kein Inhalt vorhanden), setzen Sie dieses Attribut auf „true“ und eine Anfrage wird initiiert.

 defaultValue: Standardwert. Normalerweise handelt es sich um eine Eingabeaufforderung wie: „Bitte geben Sie das Schlüsselwort ein ...“.

  Breite: Breite der Dropdown-Liste.

　 Aligner: Das auszurichtende Element.

 maxHeight: Maximale Höhe. Wenn diese Höhe eingestellt ist, werden bei Überschreitung Bildlaufleisten angezeigt.                                                                      

 

Ajax:{ Zeitüberschreitung: Zeitüberschreitung
Cache: Ob
zwischengespeichert werden soll },  

　

Ereignis:{    ​​​​​ setData: Wird vor dem Senden der Anfrage ausgelöst. Wird zum Einstellen von Parametern
verwendet itemClick: Wird durch Klicken auf das Element
ausgelöst              enterKeydown: Wird durch Drücken der Eingabetaste
ausgelöst            beforeRender: Wird ausgelöst, bevor alle Elemente gerendert werden
endRender: wird ausgelöst, nachdem alle Elemente gerendert wurden
itemBeforeRender: Wird ausgelöst, bevor das Element gerendert wird
itemAfterRender: Wird ausgelöst, nachdem das Element gerendert wurde
             beforeSend: Wird vor dem Senden der Anfrage ausgelöst. Der Benutzer legt Anforderungsheaderparameter usw. fest, was dem beforeSend von jquery ajax entspricht.
}

Die Methoden im Ereignis werden zum richtigen Zeitpunkt ausgelöst. Es ist zu beachten, dass alle Methoden ein Objekt mit 4 Attributen erhalten. In einigen Fällen ist es leer. Enthält die folgenden Attribute:

　 jthis: jQuery-Objekt der Eingabe.

　 jItem: Das jQuery-Objekt des -Elements.

Daten: Die zurückgegebene JSON-Zeichenfolge. Wenn der zurückgegebene JSON im Vordergrund verarbeitet werden muss, kann er über das Datenattribut abgerufen werden. Nach Abschluss der Verarbeitung muss die JSON-Zeichenfolge zurückgegeben werden.

　Ereignis: Ereignisobjekt, z. B. das Ereignisobjekt, wenn die Eingabetaste gedrückt wird.

3. Beispiel

Verwendungsbeispiel:

$("#search").intellSearch({
  url:"Handler.ashx",
  property:"Name",
  itemNumber:5,
  isEmptyRequest:false,
  defaultValue:"请输入关键字...",    
  width:$("#search").width() + 2,
  maxHeight:-1,
  event:{
    itemClick:function(obj){
      alert(obj.item.ID);
    },
    enterKeydown:function(obj){
      if(obj.item){
        alert("有当前项");
      }else{
        alert("没有当前项");
      }
    }
  }  
});

4. Zusammenfassung　

Wenn Sie noch Ihre eigene Logik zum Verarbeiten haben und Kettenaufrufe unterstützt werden, können Sie $("#search").intellSearch({parameters...}).focus(function(){your processing ... schreiben });

Das Teilen dieses Plug-ins soll Freunden in Not helfen. Es wird hauptsächlich zum Lernen verwendet. Da es sich um Version 1.0 handelt, kann es auch sein, dass Freunde, die sie finden, sie mir mitteilen und ich werde sie rechtzeitig beheben. ​

Quellcode beigefügt

JS-Code

/*搜索智能提示 v1.0
 date:2015.09.08 
*/
;(function(w,$){
  $.fn.intellSearch = function(options){
    var jthis = this;
    var _dftOpts = {
      url:"",//请求地址或数组          
      property:"",//要显示的json对象的属性
      itemNumber:5,//显示的条数
      isEmptyRequest:false,//focus空白是否发起请求
      defaultValue:"",//默认值
      width:0,//列表宽度
      aligner:jthis,//要对齐的元素
      maxHeight:-1,//最大高度          
      ajax:{
        timeout:3000,//超时时间
        cache:true//是否缓存
      },
      event:{
        /*参数说明:parameter:{jthis:"jq input",jItem:"jq item",data:"json result",event:"event"}*/
        setData:null,//设置参数
        itemClick:null,//点击项触发
        enterKeydown:null,//按下enter键触发
        beforeRender:null,//所有项呈现前触发
        endRender:null,//所有项呈现后触发
        itemBeforeRender:null,//项呈现前触发
        itemAfterRender:null,//项呈现后触发
        beforeSend:null//发送请求前触发
      }
    };
    $.extend(_dftOpts,options);
    if(!_dftOpts.url){
      throw Error("url不能为空！");
    }
    var jResult;        
    var _value = "";    
    var _ajax = _dftOpts.ajax;
    var _event = _dftOpts.event;
    var _cache = [];
    var _focusCount = 0;//防止focus触发多次(sogou)
     
    /*on window*/
    window.intellObj = window.intellObj || {}; /*for global event*/
    window.intellDocumentClick = window.intellDocumentClick || function(e){
      if(!window.intellObj.jthis){
        return;
      }
      if(e.target !== window.intellObj.jthis[0]){
        setIntellObj(null);
      }
    }
    window.intellDocumentKeydown = window.intellDocumentKeydown || function(e){
      var jthis = window.intellObj.jthis;
      if(!jthis){
        return;
      }
      var code = e.keyCode;
      var value = window.intellObj.value;      
      var jResult,jCurItem,keyword;
      if(code === 13 || code === 38 || code === 40){
        jResult = window.intellObj.jResult;
        jItems = jResult.find("li");
        jCurItem = jResult.find("li.cur");
        if(code === 13){
          if(jCurItem.length > 0){
            jCurItem.click();
          }else{
            setIntellObj(null);           
            if(_event.enterKeydown){
              _event.enterKeydown({"jthis":jthis,"event":e});
            }
          }
          jthis.blur();
        }else if(jItems.length > 0){
          if(code === 38){
            if(jCurItem.length <= 0){
              jCurItem = jItems.last();
              jCurItem.addClass("cur");
              keyword = jCurItem.text();
            }else{
              var index = jCurItem.index();
              jCurItem.removeClass("cur");
              if(index <= 0){
                keyword = value;              
              }else{
                jCurItem = jItems.eq(index-1);
                jCurItem.addClass("cur");
                keyword = jCurItem.text();
              }
            }
            jthis.val(keyword);
          }else{
            if(jCurItem.length <= 0){
              jCurItem = jItems.first();
              jCurItem.addClass("cur");
              keyword = jCurItem.text();
            }else{
              var index = jCurItem.index();
              jCurItem.removeClass("cur");
              if(index + 1 >= jItems.length){
                keyword = value;
              }else{
                jCurItem = jItems.eq(index+1);
                jCurItem.addClass("cur");
                keyword = jCurItem.text();
              }
            }
            jthis.val(keyword);
          }
        }
      }
    }
    /*event handler*/
    $.fn.unintell = function(){
      remove();
    }
    $(document).unbind({click:window.intellDocumentClick,keydown:window.intellDocumentKeydown})
          .bind({click:window.intellDocumentClick,keydown:window.intellDocumentKeydown});
    jthis.focus(function(){
      _focusCount++;
      if(_focusCount > 1){
        return;
      }
      if(window.intellObj.jthis && jthis !== window.intellObj.jthis){
        setIntellObj(null);
      }
      var keyword = attrValue();
      if(keyword === _dftOpts.defaultValue){
        keyword = "";
        attrValue(keyword);
      }
      if(keyword || _dftOpts.isEmptyRequest){
        sendRequest();
      }
    })
    jthis.blur(function(){      
      _focusCount = 0;
      if(!attrValue()){
        attrValue(_dftOpts.defaultValue);
      }      
    })
    jthis.keyup(function(e){
      if(e.keyCode === 38 || e.keyCode === 40){
        return;
      }
      var keyword = attrValue();
      if(!keyword){
        remove();
        window.intellObj.value = _value = "";
        return;
      }
      if(keyword !== _value){
        window.intellObj.value = _value = keyword;
        sendRequest();
      }
    });
     
    return initBox();
     
    /*function*/
    function initBox(){
      attrValue(_dftOpts.defaultValue);
      return jthis;
    }    
    function initIntell(){      
      generate();
      register();
      setIntellObj({jthis:jthis,jResult:jResult});
    }
    function generate(){
      var offset = _dftOpts.aligner.offset();
      var width = _dftOpts.width &#63; _dftOpts.width : _dftOpts.aligner.width();
      jResult = $("<ul>",{"class":"intellResult"});
      jResult.width(width).css({"position":"absolute","left":offset.left,"top":offset.top + jthis.outerHeight()});
      $("body").append(jResult);
      if(_dftOpts.maxHeight > 0){
        jResult.height(_dftOpts.maxHeight).css("overflowY","scroll");
      }
    }
    function remove(){
      if(jResult){
        jResult.remove();
        jResult = null;
      }
    }
    function register(){
      jResult.on("click","li",function(){
        var jItem = $(this);
        var index = jItem.index();
        var keyword = jItem.text();
        attrValue(keyword);        
        _value = keyword;        
        if(_event.itemClick){
          _event.itemClick({"jthis":jthis,"jItem":jItem,"item":_cache[index]});
        }
      }).on("mouseenter","li",function(){
        $(this).siblings("li").removeClass("cur").end().addClass("cur");
      }).on("mouseleave","li",function(){
        $(this).removeClass("cur");
      });
    }
    function setIntellObj(obj){
      if(!obj){
        if(window.intellObj.jResult){
          window.intellObj.jResult.remove();
        }
        window.intellObj.jthis = null;
        window.intellObj.jResult = null;
      }else{
        window.intellObj.jthis = obj.jthis;
        window.intellObj.jResult = obj.jResult;
      }
    }
    function sendRequest(){
      var data;
      if(_event.setData){        
        data = _event.setData({"jthis":jthis});
      }
      $.ajax({
        url:_dftOpts.url,
        data:data,
        cache:_ajax.cache,
        timeout:_ajax.timeout,
        beforeSend:function(xhr){
          if(_event.beforeSend){
            _event.beforeSend(xhr);
          }
        },
        success:function(data){
          remove();
          showData(data);
        },
        error:null
      });
    }
    function showData(data){
      data = $.trim(data) &#63; $.parseJSON(data) : data;
      if(_event.beforeRender){
        var rs = _event.beforeRender({"jthis":jthis,"data":data});
        if(rs === false){
          return;
        }
        if(rs !== undefined){
          data = rs;
        }
      }
      if(!data){
        return;
      }
      var jItem,jA,jSpan,hasProp,item,text,otherTexts,isRender,index;
      var list = $.isArray(data) &#63; data : [data];
      var length = list.length;
      length = length > _dftOpts.itemNumber &#63; _dftOpts.itemNumber : list.length;
      if(length <= 0){
        return;
      }
      initIntell();
      _cache.length = 0;
      hasProp = list[0][_dftOpts.property];
      for(var i=0;i<length;i++){
        item = list[i];
        if(item === null || item === undefined){
          continue;
        }
        text = hasProp &#63; item[_dftOpts.property] : item;
        text = $.trim(text.toString());
        if(text === ""){
          continue;
        }
        jItem = $("<li>",{"class":"intellResult_item"});
        jA = $("<a>",{"title":text}).appendTo(jItem);
        jSpan = $("<span>").appendTo(jA);
        index = text.toLowerCase().indexOf(_value.toLowerCase());
        otherTexts = splitText(text,_value,index);
        if(otherTexts){
          jSpan.text(text.substr(index,_value.length));
          if(otherTexts.length > 1){
            $("<b>",{"text":otherTexts[0]}).insertBefore(jSpan);
            $("<b>",{"text":otherTexts[1]}).insertAfter(jSpan);
          }else{
            if(index === 0){
              $("<b>",{"text":otherTexts[0]}).insertAfter(jSpan);
            }else{
              $("<b>",{"text":otherTexts[0]}).insertBefore(jSpan);
            }
          }
        }else{
          jSpan.text(text);
        }
        isRender = true;
        if(_event.itemBeforeRender){
          isRender = _event.itemBeforeRender({"jthis":jthis,"jItem":jItem,"item":item});
        }
        if(isRender !== false){
          jResult.append(jItem);
          if(_event.itemAfterRender){
            _event.itemAfterRender({"jthis":jthis,"jItem":jItem,"item":item});
          }
        }
        _cache.push(item);
      }
      if(_event.endRender){
        _event.endRender({"jthis":jthis});
      }
      jResult.show();
    }
    function attrValue(value){
      if(!value && value != ""){
        return $.trim(jthis.val());
      }
      jthis.val(value);
    }
    function splitText(text,value,index){
      var tlength = text.length;
      var vlength = value.length;
      if(index === -1){
        return null;
      }
      if(index === 0){
        if(index + vlength >= tlength){
          return null;
        }
        return [text.substr(index + vlength)];
      }
      if(index + vlength >= tlength){
        return [text.substr(0,index)];
      }
      return [text.substr(0,index),text.substr(index + vlength)];
    }
  }
})(window,jQuery);

Stil

.intellResult{margin:0;padding:0;background:#fff;border:1px solid #b6b6b6;clear:both;z-index:999;display:none;}
.intellResult li{margin:0;padding:0;padding:5px 15px;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;cursor:pointer;white-space:nowrap;}
.intellResult li.cur{background:#E5E0E0;}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.