Add text to input field instead of replacing it with ListView + jQuery Mobile

Question

What I am trying to accomplish:

Clicking a button adds a word to filter the jQuery Mobile ListView.

HTML:

<ul data-role="listview" data-theme="a" data-divider-theme="c">
                <li data-role="list-divider" data-inset="true">
                    <div data-role="controlgroup"  data-type="horizontal" data-mini="true" id="filterButton">
                        <a href="#" data-role="button" data-inline="true">Iedereen</a>
                        <a href="#" data-role="button" data-inline="true">LinkedIn</a>
                        <a href="#" data-role="button" data-inline="true">Facebook</a>
                        <a data-role="button" style="width: 4px;"></a>
                        <a href="#" data-role="button" data-inline="true" class="filterAdd">Design</a>
                        <a href="#" data-role="button" data-inline="true">Development</a>
                    </div>
                </li>
            </ul>
            <ul data-role="listview" data-filter="true" data-theme="d" data-divider-theme="d" data-filter-placeholder="Search Connections...">
                <li data-theme="b"><a href="index.html">
                    <img src="http://a0.twimg.com/profile_images/1353509401/DSC_3465_bigger.jpg" class="ui-li-thumb zapp-corner zapp-margin-5 zapp-inner-shadow" />
                    <h3>Stephen Weber</h3>
                    <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                    <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                    <p class="ui-li-aside"><strong>LinkedIn</strong></p>
                </a></li>

JavaScript

$(document).ready(function () {
                    $("#filterButton").delegate("a", "click", function () {
                        $("div.ui-input-search").find("input").val($(this).text());
                        $("div.ui-input-search").find("input").keyup();
                    });
});

At this moment it replaces the whole value inside the input field instead of adding it to the existing value.

http://jsfiddle.net/J4HZp/6/

Ram · Accepted Answer · 2013-02-03 18:41:41Z

2

$("#filterButton").delegate("a", "click", function () {
     var txt = $(this).text();
     $("div.ui-input-search").find("input").val(function(i, currentValue) {
        return currentValue + txt;
     }).trigger('keyup');
});

edited Feb 3, 2013 at 18:41

answered Feb 3, 2013 at 18:32

Ram

145k16 gold badges174 silver badges201 bronze badges

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

2 Comments

Ohgodwhy Over a year ago

This is exactly what he asked for, but I would .trigger('keyup'). I don't really think in this scenario it's too much of an issue, but most of the time people simply want to trigger any functions attached to the event handler, and not to trigger the event it's self.

Proto Over a year ago

This did the job! I used .trigger('keyup') because otherwise I got the same result twice (it repeated the word). jsfiddle.net/J4HZp/8

Collectives™ on Stack Overflow

Add text to input field instead of replacing it with ListView + jQuery Mobile

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related