jQuery自动完成动态ajax

Question

I'm trying to build a search input with the autocomplete feature. 我正在尝试使用自动完成功能构建搜索输入。 However, the suggestions depend on the input and are not static - which means that I have to retrieve the list every time the user types into the field. 但是，建议取决于输入，并且不是静态的-这意味着每次用户在字段中键入内容时，我都必须检索列表。 The suggestions are based on Google autosuggest: " http://google.com/complete/search?q=TERM&output=toolbar ". 这些建议基于Google的自动建议：“ http://google.com/complete/search?q=TERM&output=toolbar ”。

I'm currently using http://easyautocomplete.com . 我目前正在使用http://easyautocomplete.com 。

This is my code: 这是我的代码：

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

        }

I know this is not a very good way to do this - so do you have any suggestions as to how to do it? 我知道这不是执行此操作的好方法-那么您对如何执行操作有任何建议吗？

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 个解决方案

解决方案1
0 2015-12-12 15:48:52

jQuery自动完成动态ajax

问题描述

1 个解决方案

解决方案1 0 2015-12-12 15:48:52

解决方案1
0 2015-12-12 15:48:52