jQuery Mobile List Filter Behave Like Auto-complete

Question

The jQuery Mobile listview and search filter works and looks great. However, I would like to change the behavior to behave more like an auto-complete control i.e. the list items don't appear until a search filter is entered.

I have seen other people using the jQuery UI auto-complete but it seems like overkill to have to include this library and extra work to style the results.

Can this be done with jQuery Mobile 1.0?

Answer 1

You could try something like this

• http://jsfiddle.net/ULXbb/3/
• http://jsfiddle.net/ULXbb/5/ (Button click)

JS

$("input[data-type='search']").keyup(function() {
    if($(this).val() == '') {
        $("ul:jqmData(role='listview')").children().addClass('ui-screen-hidden');
    }
});

$('a.ui-input-clear').click(function() {
    $("input[data-type='search']").val('');
    $("input[data-type='search']").trigger('keyup');
});

HTML (Need to add the class attribute to each <li> element class="ui-screen-hidden")

<div data-role="page" id="filterMe">
    <div data-role="content">
        <ul data-role="listview" data-filter="true">
            <li class="ui-screen-hidden"><a href="#">Acura</a></li>
            <li class="ui-screen-hidden"><a href="#">Audi</a></li>
            <li class="ui-screen-hidden"><a href="#">BMW</a></li>
            <li class="ui-screen-hidden"><a href="#">Cadillac</a></li>
            <li class="ui-screen-hidden"><a href="#">Chrysler</a></li>
            <li class="ui-screen-hidden"><a href="#">Dodge</a></li>
            <li class="ui-screen-hidden"><a href="#">Ferrari</a></li>
            <li class="ui-screen-hidden"><a href="#">Ford</a></li>
            <li class="ui-screen-hidden"><a href="#">GMC</a></li>
            <li class="ui-screen-hidden"><a href="#">Honda</a></li>
            <li class="ui-screen-hidden"><a href="#">Hyundai</a></li>
            <li class="ui-screen-hidden"><a href="#">Infiniti</a></li>
            <li class="ui-screen-hidden"><a href="#">Jeep</a></li>
            <li class="ui-screen-hidden"><a href="#">Kia</a></li>
            <li class="ui-screen-hidden"><a href="#">Lexus</a></li>
            <li class="ui-screen-hidden"><a href="#">Mini</a></li>
            <li class="ui-screen-hidden"><a href="#">Nissan</a></li>
            <li class="ui-screen-hidden"><a href="#">Porsche</a></li>
            <li class="ui-screen-hidden"><a href="#">Subaru</a></li>
            <li class="ui-screen-hidden"><a href="#">Toyota</a></li>
            <li class="ui-screen-hidden"><a href="#">Volkswagon</a></li>
            <li class="ui-screen-hidden"><a href="#">Volvo</a></li>
        </ul>
    </div>
</div>

Answer 2

http://jsfiddle.net/ULXbb/48/

I have enabled its selection functionality. Now you can select items from the list. which is then written over to the input field and the list is made hidden.