How to remove autocomplete selection while I start print in text box?

user_1067943 0
Viewed 61

I use jquery autocomplete feature.

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

Here is FIDDLE!

As you can see when I select item from autocomplete it displayed in span element, and when I start to print or if I erase text in autocomplete input the previous selection is displayed, while I need to remove the previous selection each time I print in autocomplete input or I erase it.

My question is how to clear tags_id span when I print in the autocomplete input or I delete all text from it?

jquery-ui-autocomplete jquery javascript
3 Answers

You can try adding the open event handler for autocomplete to achieve the above. 

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

You may try this. Observe the open event in the JS.

user_7554210 

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

});
<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>

You can use callback event search , before new search it fires. So that time remove your previous selection.

user_35517860

Please clear the data Like - $('.tags_id').text(""); in source function as below It may help you:

$(document).ready(function () {

$("#suggest").autocomplete({
    delay: 100,
    source: function (request, response) {

        // Suggest URL
        var suggestURL = "http://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY";
        suggestURL = suggestURL.replace('%QUERY', request.term);
   $('.tags_id').text("");
        // 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);},

});

});

user_22350310
Related