Question

我使用jquery自动完成功能。

＆＃13;

$(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);},
       
    });

});

＆＃13;

<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>

＆＃13;

这是FIDDLE!

正如您从自动填充中选择项目时所看到的那样它显示在span元素中，当我开始打印或者如果我擦除自动完成输入中的文本时，将显示上一个选择，而每次我在自动完成输入中打印或删除它时我都需要删除先前的选择。

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

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

＆＃13;

$(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);},
        search: function( event, ui ) {$('.tags_id').text('');}
    });

});

＆＃13;

<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>

＆＃13;

您可以在新搜索触发之前使用回调事件search。所以那个时候删除你以前的选择。

Answer 3

请清除数据，例如 - $（＆＃39; .tags_id＆＃39;）。text（＆＃34;＆＃34;）;在源功能如下可能会帮助您：

$（document）.ready（function（）{

{{1}}

}）;

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

3 个答案: