jquery intellSeach.js_jquery를 기반으로 지능형 프롬프트 제어 구현

1. 수요

우리는 사용자 경험을 향상시키기 위해 Baidu와 같은 실시간 지능형 프롬프트를 구현하고자 하는 경우가 많습니다. 예를 들어, 회사의 인사 관리 시스템에서 Li XX를 검색하려는 경우 "Li"를 입력하면 시스템에서 자연스럽게 일부 직원에게 Li라는 이름의 메시지가 표시되므로 사용자에게 편리합니다. 직설적으로 말하면 시스템은 사용자가 입력하는 동안 관련 결과를 표시하거나 사용자가 검색 상자를 클릭하면 일부 콘텐츠를 추천합니다. 예를 들어 360과 Baidu는 대규모 검색을 통해 오늘의 주요 뉴스나 콘텐츠를 표시합니다. 용량.

jquery에는 이미 autocomplete라는 플러그인이 있는데, 사용하기가 쉽지 않은 것 같아요. 자동 완성에 대한 소개도 많이 있습니다. 관심 있는 친구는 시도해 볼 수 있습니다.

제목에서 알 수 있듯이 이것은 플러그인일 뿐이며 백그라운드 검색의 관련 알고리즘 및 프로세스에 대해 논의하지 않습니다. 즉, 백그라운드는 특정 형식으로 데이터를 반환하고 컨트롤은 다음을 담당합니다. 결과를 렌더링합니다. 좋습니다. 먼저 렌더링을 살펴보겠습니다.

　

스타일은 컨트롤과 아무런 관련이 없으며 입력 텍스트만 필요합니다.

2. 매개변수 설명

컨트롤은 전송 형식으로 json 형식을 사용합니다. 많은 매개변수가 있는데, 대부분은 기본값을 갖고 있습니다.(자세한 내용은 소스코드를 참고하세요.) 일부는 일반적으로 사용되지 않을 수 있으므로 기본값을 그대로 유지하세요. 다음과 같습니다:

　 url: 요청주소입니다. 예: Handler.ashx, 백그라운드에서 데이터를 얻기 위한 주소

  속성: 표시할 json 개체의 속성입니다. ["tom","tom cat","tom2"] 형식을 직접 반환하는 경우 이 속성을 설정할 필요가 없지만 때로는 [{"Name":"tom","ID"를 반환합니다. " 001"},{"Name":"tom cat","ID":"002"},{"Name":"tom2","ID":"003"}] 이 형식에는 이름이 표시됩니다. 그런 다음 이 속성을 "이름"으로 설정합니다. 클릭 시 얻고자 하는 클릭된 항목의 ID는 클릭 이벤트를 사용할 수 있습니다.

  itemNumber: 표시되는 항목 수입니다.

  isEmptyRequest: 비어 있을 때 요청을 시작할지 여부입니다. 앞서 언급했듯이 검색창을 클릭했을 때 일부 콘텐츠를 추천하려면(현재 콘텐츠가 없음) 이 속성을 true로 설정하면 요청이 시작됩니다.

 기본값: 기본값입니다. 일반적으로 "키워드를 입력하세요..."와 같은 메시지가 표시됩니다.

  너비: 드롭다운 목록 너비.

　 aligner: 정렬할 요소입니다.

 maxHeight: 최대 높이. 이 높이를 설정하면 해당 높이를 초과할 때 스크롤 막대가 나타납니다. ~

 

ajax:{ 시간 초과: 시간 초과
캐시: 캐시 여부
},  

　

이벤트:{    ​​​​​ setData: 요청을 보내기 전에 트리거됩니다. 매개변수를 설정하는 데 사용됩니다
itemClick: 항목을 클릭하면 트리거됩니다
             enterKeydown: Enter 키를 누르면 트리거됩니다.
           beforeRender: 모든 항목이 렌더링되기 전에 트리거됩니다.
endRender: 모든 항목이 렌더링된 후 트리거됩니다
itemBeforeRender: 항목이 렌더링되기 전에 트리거됩니다.
itemAfterRender: 항목이 렌더링된 후 트리거됩니다.
             beforeSend: 요청을 보내기 전에 트리거됩니다. 사용자는 jquery ajax의 beforeSend와 동일한 요청 헤더 매개변수 등을 설정합니다.
}

이벤트의 메서드는 적절한 시간에 트리거됩니다. 모든 메서드는 4개의 속성이 있는 개체인 매개변수를 받는 경우가 있으며, 해당 속성이 없으면 비어 있습니다. 다음 속성이 포함됩니다.

　 jthis: jQuery 입력 개체입니다.

　 jItem: 항목의 jQuery 개체입니다.

데이터: 반환된 json 문자열입니다. 반환된 json을 포그라운드에서 처리해야 하는 경우 data 속성을 통해 얻을 수 있으며, 처리가 완료된 후 json 문자열을 반환해야 합니다.

　이벤트: Enter를 눌렀을 때의 이벤트 개체와 같은 이벤트 개체입니다.

3. 예시

사용예:

$("#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. 요약　

처리할 자체 논리가 있고 체인 호출이 지원되는 경우 $("#search").intellSearch({parameters...}).focus(function(){your process ...를 작성할 수 있습니다. });

이 플러그인을 공유하면 도움이 필요한 친구들에게 도움이 되기를 바랍니다. 주로 학습용으로 사용됩니다. v1.0이기 때문에 아직 버그가 있을 수 있습니다. 발견한 친구들도 제게 알려주시면 시간이 지나면 수정하도록 하겠습니다. ​

소스코드 첨부

js 코드

/*搜索智能提示 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);

스타일

.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;}

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.