任何人都可以建议自动完成搜索

Question

我完全是个新手，我正在寻找一种方法来让搜索框像 google 一样具有自动完成功能。

我已经搜索过，我发现的最佳前景似乎是 this forum post. The guy who suggested it says he uses it with this project on google code，它已经死了，因为我在上次尝试弄清楚 cakephp 时设法安装了 searchable。

问题是，我以前用得不多 javascript，我对我到底要做什么感到有点困惑。带有自动完成代码的文档没有深入到我能理解的任何细节。

如果我们假设我设法正确安装了可搜索行为，任何好心的人都可以向我解释我将如何进行自动完成工作吗？

它说只需使用：

 $("selector").autocomplete(url [, options]);

例如：

 $("#input_box").autocomplete("autocomplete_ajax.cfm");

自动完成需要 ID 为 "input_box" 的输入元素存在。当用户开始在输入框中键入内容时，自动完成器将使用名为 q

的 GET 参数请求 autocomplete_ajax.cfm

这就是我不明白的地方。我应该把它放在哪里？一旦我把它放在某个地方，我是否只需要命名我的输入之一 "input_box"?

提前致谢。

Answer 1

您可以尝试像这样设置您的来源：

$("#input_box").autocomplete({source: "autocomplete_ajax.cfm"});

Answer 2

方法一

当您预先设定搜索选项列表时使用此选项

jQuery代码：

$(function() {
    var availableTags = [ //array of searchable options
      "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
    });
});

HTML代码：

<label for="tags">Tags: </label>
<input id="tags">

来源：http://jqueryui.com/autocomplete/

方法二

在数据库中搜索自动完成建议时使用此选项

jQuery代码：

$('input#input_box').keypress(function(){ //letter has been pressed
    var search = $(this).val();
    $.ajax({
        url : 'autocomplete_ajax.php', //the php page that will handle the request
        type : 'GET', //the method of sending the data
        data: 'q='+search, //the data you are sending
        success : function(data){
            //the variable 'data' will be whatever the php outputs (via
            //any method - echo, exit, print, print_r etc. you can
            //use data from php page to output wherever you want, e.g.
            $('div#search_autosuggestbox').html(data);
        }
    });
});

HTML:

<input id="input_box" />
<div id="search_autosuggestbox"></div>

编辑：添加了与问题

对应的页面names/values

任何人都可以建议自动完成搜索

Anyone can suggest autocomplete search

php

search

jquery-ui-autocomplete

twitter-bootstrap-3

方法一

当您预先设定搜索选项列表时使用此选项

方法二

在数据库中搜索自动完成建议时使用此选项