【问题标题】：Anyone can suggest autocomplete search任何人都可以建议自动完成搜索
【发布时间】：2017-01-25 12:36:04
【问题描述】：

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

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

问题是，我以前没有使用过多的 javascript，而且我对我到底要做什么有点困惑。带有自动完成代码的文档没有详细介绍我能理解的任何细节。

如果我们假设我设法正确安装了可搜索的行为，任何善良的人都可以向我解释我将如何让自动完成功能发挥作用吗？

它说只使用：

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

例如：

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

自动完成功能需要一个 id 为“input_box”的输入元素存在。当用户开始在输入框中输入内容时，自动完成程序将请求 autocomplete_ajax.cfm 并带有一个名为 q 的 GET 参数

这就是我不明白的一点。我打算把它放在哪里？一旦我把它放在某个地方，我只需要将我的输入之一命名为“input_box”吗？

提前致谢。

【问题讨论】：

看来你不熟悉 jQuery，这将是一个很好的起点

标签： php search twitter-bootstrap-3 jquery-ui-autocomplete

【解决方案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 代码：

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

编辑：添加与问题对应的页面名称/值

【讨论】：

【解决方案2】：

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

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

【讨论】：