开发工具 Autocomplete 问题求助

michael_roshen · 2014年05月05日 · 最后由 bydmm 回复于 2014年05月05日 · 4592 次阅读

当输入 df 后,会向服务器发送 ajax 请求,返回数据时这样的 {"q":"gf","p":false,"s":["gfan","鬼父","gfw","功夫 2","广发银行","功夫","gf5","gfp","广发银行信用卡中心","gf6"]}; 百度会把这些数据填充到搜索框中 Jquery 官网的 autocomplete 插件的实现是这样的

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
});

当输入 a 的时候,会把字符串中包含 a 的字符串填充到输入框中,autocomplete 能不能像百度的实现一样,把从服务器端返回的数据全部填充到输入框中,或者有没有其他的插件支持,而不是再返回的数据中进行筛选

在 jqueryui 官网上找到一种方法,做一个对应关系,当我输入 j 的时候,从 label 中进行查找,而再下拉框中显示的的 value,但是还是感觉稍稍复杂了一点,如果可以直接填充 value 就好了,求高人指点~

<script>
 $(function() {
   var projects = [
     {
       value: "jquery",
       label: "jQuery"
     },
     {
       value: "jquery-ui",
       label: "jQuery UI"
     },
     {
       value: "sizzlejs",
       label: "Sizzle JS"
     },
     {
       value: "阿贾克斯",
       label: "ajax"
     }
   ];

   $( "#project" ).autocomplete({
     minLength: 0,
     source: projects,
     focus: function( event, ui ) {
       $( "#project" ).val( ui.item.value );
       return false;
     }
   })
   .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
     return $( "<li>" )
       .append( "<a>" + item.value + "</a>" )
       .appendTo( ul );
   };
 });
 </script>

#1 楼 @miclle 我需要一个可以填充服务器端返回数据的插件,服务器的逻辑自己写,因为我们有自己的排序规则,谢谢

#3 楼 @diudiutang

items: [
          {value: "21", name: "Mick Jagger"},
          {value: "43", name: "Johnny Storm"},
          {value: "46", name: "Richard Hatch"},
          {value: "54", name: "Kelly Slater"},
          {value: "55", name: "Rudy Hamilton"},
          {value: "79", name: "Michael Jordan"}
        ]

你这个例子里面,输入 m,会把包含 m 的字符串填充进去,我的需求是,当我输入 m 后,这些 items 我从服务器端拿来,比如服务器返回的数据时这样的 ["my", "max", "米"], 我需要把米也填充到下拉框中,而不是仅显示 my 和 max

不知道我说明白了没有

这个只是个示范,没有让你一定用预读的 Array 啊。你可以读服务器返回的数据啊

$('input#search').on 'keyup', =>
  $.ajax
    url: 'foo/bar'
    data: $(@).val()
    success: (data) ->
      $(@).autocomplete
        source: data

#5 楼 @billy 从服务器上读取的数据应该也是 Array,你这种方法返回的 data,不会再进行过滤吗?

@michael_roshen 看了一下你修改的帖子,作者推荐的方法应该要好些。关于数据,你可以从服务器返回需要的数据啊,甚至直接加好 html 都可以的。

#7 楼 @billy 恩,是的,目前只找到这种方法,要想做成百度那样的,要自己写 js 了

jquery 的 autocomplete 对中文支持不好, 因为中文还存在一个中文输入法的问题, 貌似输入法输入的时候在触发 change 事件的时候有一些问题。

另外,autocomplete 支持通过 ajex 获取结果

需要 登录 后方可回复, 如果你还没有账号请 注册新账号