AJAX自动完成验证

时间:2016-07-27 10:33:06

标签: php html ajax autocomplete

我使用AJAX,PHP,MYSQL成功自动完成从数据库获取城市名称。它允许文本框中的自动完成值和键入值。但是我想在用户在文本框上键入时只允许自动完成值。请更正javascript用于在用户输入自己的城市名称后从文本框中输出文本框时清空文本框。

以下是html和js代码

<input type="text"  id="city" name="locality"  style="padding:1px;" required="">
<script type="text/javascript">
    $(document).ready(function(){
        $('#outer_container').height($(window).height());

        $('#city').autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url:'ajax.php',
                    dataType:"json",
                    method: 'post',
                    data: {
                        name_startsWith: request.term,
                        type:'city'
                    },
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            console.log(item);
                            //var code = item.split("|");
                                return {
                                    label: item,
                                    value: item,
                                    data : item
                                }
                            }));
                        }
                    });
            },
            autoFocus: true,            
            minLength: 1,
            select: function( event, ui ) {
                /* $('#myButton').show();
                var names = ui.item.data.split("|");
                $(this).val(names[1]);
                getClientAddress(names[0]); */
            }               
        });
    });

</script>

1 个答案:

答案 0 :(得分:0)

使用select2插件而不是自动完成。 您可以在此处查看示例https://select2.github.io/examples.html