Question

有一个巨大的城市数据库和系统中的其他东西（位置）等待被驱逐出去作为下拉列表，div或什么东西可以压缩大量的选择 - 立即在每个想要的角色之后位置输入到该输入字段。

类似于在我们提交问题时添加标签。因此，如果我们输入“L”伦敦和拉齐奥将被列入“La”之后 - 只有拉齐奥将保持可用。

如何实现这一目标的任何步骤或很酷的例子？试图找到自己很酷但没有运气的东西。我正在使用jquery。

Answer 1

您可以使用

下的div创建一个文本框

<input name="txtSearch" type="text" onkeydown="jscriptfunc();" autocomplete="off"/>    
<div class="autoDiv"></div> (could use CSS to format the div accordingly)

现在，用户按下键时的jscriptfunc可以编码为在ajax的帮助下调用PHP脚本。这个PHP脚本正在采用用户输入的任何内容并执行简单的模式匹配搜索，例如

Select * from table where field like '$input%' limit 5;

然后我们只取结果并将其输入div

Answer 2

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

$("#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');
        }               
    })

将字符输入输入字段时自动建议？

2 个答案: