Question

我尝试使用自动完成功能构建搜索输入。但是，建议取决于输入并且不是静态的 - 这意味着每次用户键入字段时我都必须检索列表。这些建议基于Google自动提示：＆＃34; http://google.com/complete/search?q=TERM&output=toolbar＆＃34;。

我目前正在使用http://easyautocomplete.com。

这是我的代码：

        var array = [];
        var options = {
            data: array
        };

        $("#basics").easyAutocomplete(options);

        $("#basics").on("keyup",function() {
            var keyword = $(this).val();
            array = [];
            updateSuggestions(keyword);
        });


        function updateSuggestions(keyword) {

            $.ajax({
                type: "POST",
                url: "{{ path('suggestKeywords') }}",
                data: {keyword:keyword},
                success: function(res){
                    var res = JSON.parse(res);

                    for(var i in res)
                    {
                        var suggestion = res[i][0];
                        array.push(suggestion);
                        console.log(suggestion);
                    }

                }
            });

            var options = {
                data: array
            };
            $("#basics").easyAutocomplete(options);

        }

我知道这不是一个很好的方法 - 所以你对如何做这个有什么建议吗？

Answer 1

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete functionality</title>
  <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <!-- Javascript -->
  <script>
    $(function() {
      var availableTutorials = [
        "ActionScript",
        "Boostrap",
        "C",
        "C++",
      ];
      $("#automplete-1").autocomplete({
        source: availableTutorials
      });
    });
  </script>
</head>

<body>
  <!-- HTML -->
  <div class="ui-widget">
    <p>Type "a" or "s"</p>
    <label for="automplete-1">Tags:</label>
    <input id="automplete-1">
  </div>
</body>

</html>

jQuery自动完成动态ajax

1 个答案: