AJAX 自动完成验证

Question

我已经成功地使用 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>

Answer 1

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