开发者社区> 问答> 正文

怎么在js实现类似百度的自动补全功能。

各位大神好, 我想做一个功能,就是类似baidu google 搜索的时候,自动补全功能。要求数据重后他提取。

展开
收起
a123456678 2016-07-08 10:32:53 1975 0
1 条回答
写回答
取消 提交回答
  • jquery ui 有一个autocomplete的插件,可以实现这个功能  在后台传一个 json格式的数组数据过来。JS如下:
    
    $(function() { 
    var cache = {}; 
        function split( val ) { 
          return val.split( /,\s*/ ); 
        } 
        function extractLast( term ) { 
          return split( term ).pop(); 
        } 
      
        $( "#tags" ) 
          // don't navigate away from the field on tab when selecting an item 
          .bind( "keydown", function( event ) { 
            if ( event.keyCode === $.ui.keyCode.TAB && 
                $( this ).data( "ui-autocomplete" ).menu.active ) { 
              event.preventDefault(); 
            } 
          }) 
          .autocomplete({ 
            minLength: 1, 
            source: function (request, response) { 
             var term = request.term; 
                if ( term in cache ) { 
                  response( cache[ term ] ); 
                  return; 
                } 
                $.ajax({ 
                    type: "POST", 
                    url: mlog.variable.base+"/admin/post/autocomplete?keyword=" +  extractLast( request.term ) , 
                    contentType: "application/json; charset=utf-8", 
                    dataType: "json", 
                    success: function (data) { 
                     cache[ term ] = $.map(data, function(item){ 
             return item.name 
             }); 
                     response( $.ui.autocomplete.filter( 
                     $.map(data, function(item){ 
                     return item.name 
                     }), extractLast( request.term ) ) ); 
                    }, 
                    error: function () { 
                        alert("补全失败"); 
                    } 
                }); 
    }, 
            focus: function() { 
              // prevent value inserted on focus 
              return false; 
            }, 
            select: function( event, ui ) { 
              var terms = split( this.value ); 
              terms.pop(); 
              terms.push( ui.item.value ); 
              terms.push( "" ); 
              this.value = terms.join( ", " ); 
              return false; 
            } 
          }); 
      }); 
    
    <script type="text/javascript" src="/script/jquery.js"></script> 
    <link rel="stylesheet" type="text/css" href="/script/jquery-ui/themes/base/jquery.ui.all.css"> 
    2019-07-17 19:53:10
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript异步编程 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载