1

我一直在一个当前使用 Prototype+Scriptaculous 的Ajax.Autocomplete的网站上工作。目前它工作得很好，但我需要将它转换为 jQuery。

我知道jQueryUI有一个Autocomplete，但我看不出是否有一种方法可以使用现有的外部 URL 而无需更改它。

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

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

这几乎是不言自明的：inputID是 的 ID <input>，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 自动完成一起使用，那就太好了，但我不知道它是否可能（如果可以，该怎么做）。

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

可以做到吗？

4

3 回答 3

1

编辑：手动 jQuery

请尝试这段代码，我没有测试它，所以可能有一两个错误。这也假设 /search.php 在同一个域上。根据需要编辑设置中的值

$（函数（）{

   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 的 typeahead。（不要与 bootstrap 的 typeahead 混淆，这是完全独立的，只需要 jquery）

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

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

  • 自动完成
  • 自动建议
  • 键盘支持
  • 多个来源，本地和远程
  • 结果缓存（localStorage）和请求限制
  • 模板支持（需要兼容mustache的模板引擎，例如Hogan）

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

于 2013-03-06T17:42:40.853 回答
1

好的，既然你不想输出 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转换为正确格式的数组的想法。

于 2013-03-06T18:34:50.857 回答
0

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

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

于 2013-03-06T18:40:17.663 回答