如何在自动填充文本框

Question

在autocomplete文本框中输入时，是否可以帮助我从数据库中获取数据？

HTML代码

<input type="text" id="autocomplete" name="autocomplete" class="autocomplete">
<label for="autocomplete">Test Section</label>enter code here

jquery的

$(function() {
    $('input.autocomplete').autocomplete({
        data: {
               $sql="SELECT * FROM test_section";
               if($r=mysqli_query($con,$sql)){
                   while($result= $r->fetch_row()){
               ?> 
            "<?php echo result['Test_main_sections']?>":null,
            "English Language": null,
            "Quantitative Aptitude": null,
            "Reasoning Ability": null,
        <?php }}?>
        }
    });
});

好吧，我尝试使用PHP查询获取数据，但它无效！

Answer 1

这是我过去所做的，对我来说效果很好：

请注意我在我的项目中使用过Bootstrap并使用了类型头BS版本。希望这可能会有所帮助。

下面的输入字段。

<input type="text" id="globalSearch" class="form-control input-sm typeahead" placeholder="Search..." data-provide="typeahead" autocomplete="off">

/* Start Search */
    var $input = $('#globalSearch');
    $input.typeahead({
        autoSelect: true,
        minLength: 3,
        items: 20,
        delay: 500,
        highlight: true,
        displayKey: 'StoreName',
        source: function (query, process) {
            return $.getJSON('_Ajax/Search_Stores', { Search: query },
/*This search stores page will have to return json data. As user types, you can grab the 'Search' param on the page and pass that value to your DB to get the results. */
                function (data) {
                    GUID = {};
                    Profile = {};
                    userLabels = [];
                    //build results dropdown
                    $.each(data, function () {
                        var StoreName = this.StoreName
                        var Search
                        if (this.Search) {
                            Search = " (" + this.Search + ")";
                        } else {
                            Search = "";
                        }
                        userLabels.push(this.StoreName + Search);
                        GUID[this.StoreName + Search] = this.GUID;
                        Profile[this.StoreName + Search] = this.Profile;
                    });
                    process(userLabels);
                });
        },
        highlighter: function (item) {
            var StoreName = item;
            var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
            //Highlight search text
            return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                return '<strong>' + match + '</strong>'
            });
        },
        updater: function (item) {
            console.warn(item);
        }
    });

    //When search is clicked, process search again.
    $(document).on("click", "input.typeahead", function () {
        $(this).trigger("input");
    });