Question

我一直在开发一个目前使用Prototype + Scriptaculous Ajax.Autocomplete的网站。它目前运行良好，但我需要将其转换为jQuery。

我知道 jQueryUI 有Autocomplete，但我无法看到是否有办法使用现有的外部网址而无需更改。

使用Scriptaculous的Ajax.Autocomplete它非常简单：

new Ajax.Autocompleter('inputID', 'destinationID', 'search.php', {
    paramName: 'q',
    minChars: 2,
    frequency: 0.4,
    indicator: 'loading'
    });

几乎不言自明： inputID 是<input>的ID， destinationID 是您希望结果显示的元素。 search.php 是返回数据库结果的页面 - 包括您希望在列表中显示的HTML。

其他选项应该非常明显：）

search.php?q=search-query当前返回格式良好的HTML，如下所示：

<ul>
    <li id="ID">Result</li>
    <li id="ID">Result</li>
    <li id="ID">Result</li>
</ul>

如果我可以将它与jQueryUI Autocomplete一起使用，那将会很棒，但我不知道它是否可行（如果是的话，该怎么做）。

我查看了一些关于使用jQueryUI的自动完成的教程，但他们似乎都专注于使用Javascript数组（对我来说没用，因为我有数千条记录可以在数据库中搜索），或者JSON（我希望尽可能避免使用）。

可以吗？

Answer 1

编辑：手动jQuery

请尝试使用此代码，我没有对其进行测试，因此可能存在一两个错误。此外，假设/search.php位于同一个域中。根据需要在设置中编辑值

$（function（）{

   var debounce;

   var settings = {
       input: '#inputID',
       dest: '#destID',
       url: '/search.php?q=',
       minLength: 2,
       debounceDelay: 200
   }

   $(settings.input).on('keyup', function () {
       var q = this.value;

       if (debounce) clearTimeout(debounce);

       if (q && q.length >= settings.minLength)
       {
           debounce = setTimeout(function () {doSearch(q);},
                                 settings.debounceDelay);
       }

   });

   $(settings.dest).on("click", "li", function (e) {
       $(settings.input).val($(this).text());
       $(settings.dest).empty();
   })

   function doSearch(query) {
       $(settings.dest).load(settings.url + query);
   };

}）;

JSON方法

看看twitter的最新版本，刚刚发布。（不要与bootstrap的预先混淆，这是完全独立的，只需要jquery）

http://twitter.github.com/typeahead.js/

它的行为就像谷歌的搜索框

autocomplete
自动提示
键盘支持
多个来源，包括本地和远程
结果缓存（localStorage）＆amp;请求限制
模板支持（需要mustache兼容的模板引擎，例如Hogan）

如果您需要有关如何使用它的任何说明，请查看examples或下面的评论

Answer 2

好的，既然你不想输出JSON，试试这个：

var aclist = [];
$('input#myauto').autocomplete({
  source: aclist,
  change: function( event, ui ) {
              $.ajax({
                  url: 'search.php',
                  data: {
                      'inputID': inputID,
                      'destinationID': destinationID
                  },
                  dataType: 'html',
                  success: function (html) {
                      aclist = [];
                      $('li', html).each(function () {
                          aclist.push({
                              value: this.id,
                              label: $(this).text()
                          });
                      });
                  },
                  error: function (jqXHR, textStatus, errorThrown) {
                      aclist = [];
                  }
              });
  }
});

我没有调试它，但基本上是将ajax调用链接到onChange事件并将该调用返回的html转换为正确格式的数组。

Answer 3

您可以使用Jquery自动完成并使用函数作为源，然后在该函数上进行ajax调用并将脚本中的html解析为javascript数组

查看自动完成源属性http://api.jqueryui.com/autocomplete/#option-source

的jquery文档

jQuery使用URL自动完成

3 个答案: