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

Question

我是一个新手，我正在寻找一种像google一样拥有自动完成搜索框的方法。

我搜索过，我发现的最佳前景似乎是this forum post。那个建议它的人说他用this project on google code来使用它已经死了，因为我已经设法安装了我最后一次尝试找出cakephp的搜索。

问题是，我之前没有使用太多的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

方法1

当您有预定的搜索选项列表

时使用此选项

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 code：

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

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

方法2

在数据库中搜索自动填充建议

时使用此选项

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>

编辑：添加与问题

对应的页面名称/值