php - 在输入字段中输入字符时自动建议？

Question

系统(位置)中有一个巨大的城市数据库和其他内容，等待作为下拉列表、div(s) 或其他可以压缩大量选择的东西被驱出——在每个想要的字符之后立即位置已输入该输入字段。

类似于我们提交问题时在这里添加标签。因此，如果我们输入“L”，London 和 Lazio 将被列出，在“La”之后 - 只有 Lazio 将保留可用。

任何步骤或很酷的例子如何完成这个？试图自己找到一些很酷的东西，但没有运气。我正在使用 jquery。

Answer 1

这可能不是最好的解决方案，但它适用于我的网站。此脚本实现街道名称自动完成，这取决于用户之前输入的州和城市。这段特殊的代码监听事件“keyup”。如果用户输入了多个字母，脚本将启动 ajax 请求，其中 .php 脚本分析我们发送的参数，进行 SQL 查询和回复。如果用户足够幸运并且他得到了一些关于他试图查找的街道名称的建议，我们会向他显示 id=hintsTable 的 div。我们还为每个自动完成选项创建事件监听器(单击)，在其中我们为自动完成选项替换输入字段的值并隐藏下拉列表。希望对您有所帮助。

$("#street input").keyup(function(){                                                    //street enter
        var input = $('#street input').val(); //we get what user has already entered
        var code = $('#mregionSelect').val(); //city id
        if(input.length > 1)
        {
            $.ajax({
                type        : "POST",
                url         : "components/com_areas/ajaxhelper.php",
                data        : "input=" + encodeURIComponent(input) + "&code=" + code,
                cache       : false,
            }).done(function(msg){
                if(msg.length > 0)
                {
                    $('#hintsTable').html(msg); //fill drop-down list with auto complete options
                    $('#hints').css('display', 'block'); //show the list
                    $('#hintsTable tr').click(function(){
                        var hint = this.cells[0].innerHTML;
                        $('#street input').val(hint);
                        $('#hints').css("display", "none");
                    })
                }
                else
                {
                    $('#hintsTable').html('');
                    $('#hints').css('display', 'none');
                    //$('#findButton').css('display', 'none');
                }
            })
        }
        else
        {
            $('#hintsTable').html('');
            $('#hints').css('display', 'none');
            //$('#findButton').css('display', 'none');
        }               
    })