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/

Answer 1

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