javascript - 当我开始在文本框中打印时如何删除自动完成选择？

Question

我使用 jquery 自动完成功能。

$(document).ready(function () {
    
    $("#suggest").autocomplete({
        delay: 100,
        source: function (request, response) {
            
            // Suggest URL
            var suggestURL = "https://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY";
            suggestURL = suggestURL.replace('%QUERY', request.term);
            
            // JSONP Request
            $.ajax({
                method: 'GET',
                dataType: 'jsonp',
                jsonpCallback: 'jsonCallback',
                url: suggestURL
            })
            .success(function(data){
                response(data[1]);
            });
        },
        select: function( event, ui ){$('.tags_id').text(ui.item.value);},
       
    });

});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<input type="text" placeholder="type something ..." id="suggest" />
Chose: <span class="tags_id"></span>

这里是 FIDDLE!

当我从自动完成中选择项目时你可以看到它显示在 span 元素中，当我开始打印或者如果我在自动完成输入中删除文本时，会显示之前的选择，而每次在自动完成输入中打印或删除它时我都需要删除之前的选择。

我的问题是，当我在自动完成输入中打印或删除其中的所有文本时，如何清除 tags_id 跨度？

Answer 1

您可以尝试为 autocomplete 添加 open 事件处理程序来实现上述目的。

$(document).ready(function () {
    
    $("#suggest").autocomplete({
        delay: 100,
        source: function (request, response) {
            
            // Suggest URL
            var suggestURL = "https://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY";
            suggestURL = suggestURL.replace('%QUERY', request.term);
            
            // JSONP Request
            $.ajax({
                method: 'GET',
                dataType: 'jsonp',
                jsonpCallback: 'jsonCallback',
                url: suggestURL
            })
            .success(function(data){
                response(data[1]);
            });
        },
        select: function( event, ui ){$('.tags_id').text(ui.item.value);},
        open: function( event, ui ) {$('.tags_id').text('');}
       
    });

});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<input type="text" placeholder="type something ..." id="suggest" />
Chose: <span class="tags_id"></span>

你可以试试这个。观察JS中的open事件