Search jQuery

jQuery Forum

jQuery Autocomplete can't display dropdown result (two autocomplete) after changing keyword

in Using jQuery UI • 6 years ago

I have one jquery ui autocomplete input that I would like to show another dropdown after another. For example : If I type two characters of the city name like ba, it would display a dropdown contained : Addis Ababa, Baghdad, Baku, Bamako and Bangkok. If I pick one of them (Bangkok) and press a spacebar, another dropdown (at the same input box) would be displayed : Bangkok Accommodation, Bangkok Restaurants, Bangkok Sights, and Bangkok Transport. I can do this but only for the first time. When I change the keyword, the dropdown fail to be displayed. Here is the script :

<html> <head> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <script type="text/javascript"> $(function() { var Cities = [ 'Abu Dhabi', 'Abuja', 'Accra', 'Amsterdam', 'Addis Ababa', 'Baghdad', 'Baku', 'Bamako', 'Bangkok', 'Beijing', 'Cairo', 'Canberra', 'Caracas' ]; $('#dest').autocomplete({ source: Cities, minLength: 2, select: function (event, ui) { $(this).val(ui.item.value); $(this).blur(); $(this).focus(); //the second autocomplete var more=[ ui.item.value + ' Accommodation', ui.item.value + ' Restaurants', ui.item.value + ' Sights', ui.item.value + ' Transport' ]; $('#dest').autocomplete({ source: more, select: function (event, ui) { $(this).val(ui.item.value); } }); } }); }); </script> </head> <body> <div> <span><em><strong>City</strong></em></span> <br /> <span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span> </div> </body> </html>

I dont want to use another input box for this.

Replies(3)

mike_laird

Re: jQuery Autocomplete can't display dropdown result (two autocomplete) after changing keyword

6 years ago

Your code is unreadable as a single line. I have re-posted it below, so people can see and talk about it.

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function() {
                var Cities = [ 'Abu Dhabi', 'Abuja', 'Accra', 'Amsterdam', 'Addis Ababa', 'Baghdad', 'Baku', 'Bamako', 'Bangkok', 'Beijing', 'Cairo', 'Canberra', 'Caracas' ];
                $('#dest').autocomplete({
                    source: Cities,
                    minLength: 2,
                    select: function (event, ui) {
                        $(this).val(ui.item.value);
                        $(this).blur();
                        $(this).focus();
                        //the second autocomplete
                        var more=[ ui.item.value + ' Accommodation', ui.item.value + ' Restaurants', ui.item.value + ' Sights', ui.item.value + ' Transport' ];
                        $('#dest').autocomplete({
                            source: more,
                            select: function (event, ui) {
                                $(this).val(ui.item.value);
                            }
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <div>
            <span><em><strong>City</strong></em></span> <br />
            <span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
        </div>
    </body>
</html>

I understand you to say, you get the second dropdown, e.g., Bangkok Restaurants, etc., and can select it. But if you then enter Ad into the filled input box, you don't get Addis Abba (the 1st AC) and Autocomplete hangs.

If that is the problem, my hunch is that the 2 select options in 1 AC function, somehow hang AC. I would try the "Power Off / Power On" approach that often works on hardware. :-) In the second select: option, try these 2 instructions after the 1 instruction that is currently there, and see if you get a fresh, working instance of AC.

$( "#dest" ).autocomplete( "disable" );
$( "#dest" ).autocomplete( "enable" );

advcha

Re: jQuery Autocomplete can't display dropdown result (two autocomplete) after changing keyword

6 years ago

Hi mike_laird,

my code looked fine when I previewed it but somehow it looked differently when I submitted it.

I tried to insert your code to mine but it don't work. Could you explain more?

Thanks.

mike_laird

Re: jQuery Autocomplete can't display dropdown result (two autocomplete) after changing keyword

6 years ago

Since you did not comment on my description of your problem, I presume I got it roughly right. Let me expand on it. When the second dropdown is selected, say Bangkok Restaurants, and shows in the input box, the user has to delete it before entering a new city, say Addis . . . If the user types Addis while Bangkok Restaurants is in the input box, nothing will happen in Autocomplete because it is preserving the selected input value.

My suggestion is to try the following in the second select: option. It should execute, but it may or may not solve your problem.

select: function (event, ui) {
$(this).val(ui.item.value);

$('#dest').autocomplete('disable');
   //or try
  $('dest').autocomplete('destroy');


  $('#dest').autocomplete('enable');

    
}

    

    
If that doesn't work, another alternative is to merge the 2
    selections into 1 selection array, use just 1 Autocomplete and put a
    limit on the number displayed in the dropdown. But that may
  have some useability issues, particularly if the list of cities is
  large.

Top Reply

Response title

Attachments

jQuery Forum

jQuery Autocomplete can't display dropdown result (two autocomplete) after changing keyword

Replies(3)

Re: jQuery Autocomplete can't display dropdown result (two autocomplete) after changing keyword

Re: jQuery Autocomplete can't display dropdown result (two autocomplete) after changing keyword

Re: jQuery Autocomplete can't display dropdown result (two autocomplete) after changing keyword

Statistics

Tags

Actions

Related Posts