how to make autocomplete field blank after select an item from drop down list

Question

Here is my code:

    var availableTags = ["Afghanistan","Albania","Algeria","Andorra","Angola","Antigua and  Barbuda","Argentina","Armenia","Australia","Austria","Azerbaijan","Bahrain","Bangladesh","Barbados","Belarus","Belize","Benin","Bhutan","Bolivia","Bosnia and Herzegovina","Botswana","Brazil","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Central African Republic","Chad","Chile","China","Columbia","Comoros","Congo","Costa Rica","Croatia","Cuba","Cyprus","Czech Republic","Czechoslovakia","Dem. Rep. of Congo","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Finland","Finland","France","France","Gabon","Gambia, The","Georgia","Germany","Ghana","Greece","Grenada","Guadeloupe (Fr.)","Guam","Guatemala","Guinea","Guinea-Bissau","Guyana","Haiti","Honduras","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isreal","Italy","Ivory Coast","Jamaica","Japan","Jordan","Kazakhstan","Kenya","Korea, North","Korea, South","Kuwait","Kyryzstan","Laos","Latvia","Lebanon","Leichtenstein","Lesotho","Liberia","Libya","Lithuania","Luxembourg","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Martinique (Fr.)","Mauritania","Maurtitus","Mexico","Moldova","Monaco","Mongolia","Morocco","Mozambique","Myanmar (Burma)","Namibia","Nepal","Netherlands","New Zealand","Nicaragua","Niger","Norway","Oman","Pakistan","Panama","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Romania","Russia","Rwanda","San Marino","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia and Montenegro","Seychelles","Sierra Leone","Singapore","Slovakia","Solvenia","Somalia","South Africa","South Korea","Spain","Sri Lanka","St. Kitts-Nevis","St. Lucia","St. Vincent and the Grenadines","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Tajikistan","Tanzania","Tasmania","Thailand","Timor, East","Togo","Trinidad and Tobago","Tunisia","Turkey","Turkmenistan","Uganda","Ukraine","United Kingdom","Unites Arab Emirates","Uruguay","USA","Uzbekistan","Vatican City","Venezuela","Vietnam","Virgin Islands (U.K.)","Virgin Islands (U.S.)","Yemen","Zambia","Zimbabwe"];
    var country;
    $( "#country_name" ).autocomplete({
      source: availableTags,
      autoFocus: true,
      select: function( event, ui ) {              
           country=ui.item.value;
           $('#div_selected_country').text($('#div_selected_country').html()+"\n"+country);
           $('#hid_country_names').val($('#div_selected_country').html());
           //$('#country_name').val()="";//doesn't become blank.
      }
    });

  });

and here is my html file

<input name="hid_country_names" id="hid_country_names" type="hidden">
<div id="div_selected_country" style="float:left; width:25%">

when i start writing country name it shows me matched country list in drop down. after selecting a country it appear in text box. but i wanted country name should appear in my div_selected_country (works fine) and make text box country_name blank.

score 1 · Answer 1 · edited May 23 '17 at 12:11

1

Calling the val() method on your input field without parameters returns the value. Your statement

$('#country_name').val()="";

Is the same as saying

some_string = "";

You want to set it to an empty string in the parameter

$('#country_name').val('');

The event may be setting it again. This should do the trick

$( "#country_name" ).autocomplete({
  source: availableTags,
  autoFocus: true,
  select: function( event, ui ) {              
       country=ui.item.value;
       $('#div_selected_country').text($('#div_selected_country').html()+"\n"+country);
       $('#hid_country_names').val($('#div_selected_country').html());
       $(this).val('');
       return false;
  }
});

Using $(this) as the context is the ui element. Returning false from the method should prevent autocomplete from setting again.

This answer suggests the same and explains why: Clear form field after select for jQuery UI Autocomplete you should probably just go up-vote that answer.

edited May 23 '17 at 12:11

Community

1
1

answered Dec 18 '13 at 05:10

crad

433
3
6

Please include the HTML for the input you want to make blank. Maybe your selector is incorrect. – crad Dec 18 '13 at 05:21
Only solution is your one: $(this).val(''); Thanks crad. thanks a lot. – user1911703 Dec 18 '13 at 13:43
+1 for the return false. My input field was showing a blank input with a blinking cursor on select. Even though console logging the input # showed the selected value there. – Ben Racicot Jan 23 '15 at 14:42

Nitin Varpe · Answer 2 · 2013-12-18T05:17:12.520

0

As you have written the below line

$('#hid_country_names').val($('#div_selected_country').html());

you should have come to know that it should be

$('#country_name').val('');

Or try

  $('#country_name').text('');

edited Dec 18 '13 at 05:17

answered Dec 18 '13 at 05:08

Nitin Varpe

10,450
6
36
60

i have tried but result same. country_name text box doesn't becomes blank. – user1911703 Dec 18 '13 at 05:16

A.G. · Answer 3 · 2013-12-18T05:54:11.903

0

    select: function (event, ui) {
        event.preventDefault();
        country=ui.item.value;
        $('#div_selected_country').text($('#div_selected_country').html()+"\n"+country);
        $('#hid_country_names').val($('#div_selected_country').html());
        if ( ui.item ){
          $('#country_name').attr('value', '');

        }
    }

edited Dec 18 '13 at 05:54

answered Dec 18 '13 at 05:12

A.G.

734
2
8
27

how to make autocomplete field blank after select an item from drop down list

3 Answers3