mobile jquery - listview data-filter value

Question

How do I call for the value of the search term made in data-filter search box?

ex.

 <ul  id="search" data-role="listview" data-inset="true" data-filter="true">

var searchValue = document.getElementById("search").value

(using this does not work, refers to <ul>, not the search textbox.)

Also, how do I call for the event 'keyup' when typing in the searchbox?

$("#search").keyup(...)

does not work either.

Would like to do this without having to create a separate search box, since then I would have to build the filtering system from scratch.

Sorry, I'm a newbie so any help would be greatly appreciated. Thanks!

Phill Pafford · Accepted Answer · 2012-02-10 02:07:53Z

5

Does this work?

JS

$("input[data-type='search']").keyup(function() {
    alert('Value: '+$(this).val());
});

Alternative

$("input:jqmData(type='search')").keyup(function() {
    alert('Value: '+$(this).val());
});

answered Feb 10, 2012 at 2:07

Phill Pafford

85.6k92 gold badges268 silver badges385 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pitto Over a year ago

This works simply great but what if I have more input in the same page?

Pitto Over a year ago

Silly me! Good old div & css selectors: $("#yourid input:jqmData(type='search')").keyup(function()... :)

Jasper · Accepted Answer · 2012-02-10 04:10:59Z

If you take a look at the HTML for an initialized data-type="search" widget you will see that the search form is pre-pended just before the list-view element:

        <form class="ui-listview-filter ui-bar-c" role="search">
            <div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c">
                <input placeholder="Filter items..." data-type="search" class="ui-input-text ui-body-c">
                <a href="#" class="ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-input-clear-hidden" title="clear text" data-theme="c">
                    <span class="ui-btn-inner ui-btn-corner-all">
                        <span class="ui-btn-text">clear text</span>
                        <span class="ui-icon ui-icon-delete ui-icon-shadow"></span>
                    </span>
                </a>
            </div>
        </form>
        <ul data-role="listview" data-filter="true" class="ui-listview">
            <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="index.html" class="ui-link-inherit">Acura</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
        </ul>

So given this information you can see that to select the search input respectively to the list-view element you selector should looks something like this:

$("#search").prev().children().first().keyup(...)

Which selects the previous sibling element to the list-view (the <form class="ui-listview-finter"> element), then the first child of that element (), which should be the <input data-type="search" /> element. This is a pretty fast selector too, using an ID then single-level traversal functions.

Clarence Liu · Accepted Answer · 2012-02-10 03:04:47Z

0

You're doing this in jQuery mobile? Do you know that jQM loads subsequent pages via AJAX? If that #search id is loaded in a subsequent page you'd need to use a live or on event, and you can get instances where more than one element with the same id gets loaded, etc etc - lots to be careful of - if Phil's answer doesn't work, which it should, it may be an issue with how you setup your jQM site.

Otherwise it should work unless you're on Android's Firefox browser which I've had issues with keyup with.

answered Feb 10, 2012 at 3:04

Clarence Liu

4,0492 gold badges28 silver badges30 bronze badges

Collectives™ on Stack Overflow

mobile jquery - listview data-filter value

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related