autocomplete combobox in jquery mobile

Question

I'm aware of the jQuery UI autocomplete-combobox widget. But now I'm looking a mobile equivalent. As far as I know, while using jQuery Mobile I can use a select box or a listview with autocomplete.

Is there a control in jQuery Mobile that behaves like the Autocomplete combobox in jQuery UI?

I need to present to a user a dropdown where he can type to filter the available options or scroll down to see them all

Thanks!

Have you tried jquery mobiles auto complete? http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/autocomplete/ — krishwader, May 30 '13 at 13:57
@passionateCoder Yes, that's a listview with data-filter="true" — Matías Cánepa, May 30 '13 at 14:00
Would you want your options to be pre-populated in the drop down (wish) element? Maybe `` could come to your rescue :https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist — krishwader, May 30 '13 at 14:04
Or maybe see this : http://stackoverflow.com/questions/8974709/jquery-mobile-list-filter-behave-like-auto-complete / theyre trying to hide the list view and making it behave like an auto complete text box — krishwader, May 30 '13 at 14:09

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

You can use

https://github.com/commadelimited/autoComplete.js

html:

 <div data-role="page" class="jqm-demos" id="mainPage">
        <p>
            <input type="text" id="searchField" placeholder="Categories">
            <ul id="suggestions" data-role="listview" data-inset="true"></ul>
        </p>
    </div>

javascript:

 <script>
        var autocompleteData = $.parseJSON('[{"value":"AL","label":"Alabama"},{"value":"AK","label":"Alaska"},{"value":"CA","label":"California"},{"value":"CO","label":"Colorado"},{"value":"CT","label":"Connecticut"},{"value":"NC","label":"North Carolina"},{"value":"ND","label":"North Dakota"},{"value":"NI","label":"Northern Marianas Islands"},{"value":"OH","label":"Ohio"},{"value":"OK","label":"Oklahoma"},{"value":"OR","label":"Oregon"},{"value":"PA","label":"Pennsylvania"},{"value":"PR","label":"Puerto Rico"},{"value":"RI","label":"Rhode Island"},{"value":"WV","label":"West Virginia"},{"value":"WI","label":"Wisconsin"},{"value":"WY","label":"Wyoming"}]');

        $("#mainPage").bind("pageshow", function (e) {
            $("#searchField").autocomplete({
                target: $('#suggestions'),
                source: autocompleteData,
                callback: function (e) {
                    var $a = $(e.currentTarget);
                    $('#searchField').val($a.data('autocomplete').value);
                    $("#searchField").autocomplete('clear');
                },
                link: 'target.html?term=',
                minLength: 1
            });
        });
    </script>

I posted its usage sample in

https://stackoverflow.com/questions/34164377/how-to-use-jquery-mobile-autocomplete-plugin-with-jqgrid

autocomplete combobox in jquery mobile

1 Answers1