jQuery listview - how to hide list when item is clicked

Question

I'm using jQuery to create a listview and a filter. If the user clicks an item I want the filter to set the text to the item clicked and hide the list. But not permanently! The list needs to come back if the user changes the filter text.

Here is what I have:

    $(document).ready(function () {

        jQuery.support.cors = true;
        $("#groupSelectList").listview({
            filter: true,
            filterPlaceholder: '',
            icon: false
        });

        $('#groupSelectList').children('li').on('click', function () {
            $('#groupName').val($(this).text());
            $("input[data-type='search']").val($(this).text())
            //$("#groupSelectList").listview("refresh");//this refresh doesn't appear to do anything.
            $("#groupSelectList").listview().hide()//hide works, but the list won't come back if the user changes the input text.
        });
    });

...

The widget on this page is an example of the control I'm using: http://view.jquerymobile.com/master/demos/

I have two Jquery Mobile List view on same page and this $("input[data-type='search']").val($(this).text()), assigns value to both text search. Is there any way to define id to "input[data-type='search'" — Vivek Ranjan
– Vivek Ranjan, Commented May 7, 2015 at 13:20

Anthony · Accepted Answer · 2013-04-09 17:40:06Z

I figured out how to make this happen. In case anyone is interested, to get the jQuery mobile listview control to disappear on click and then re-appear on change I bound a temporary keyup event to the search box. My code now looks like this:

    var groupSelectHandler = function () {
        $("#groupSelectList").listview().show()
        $("#groupSelectList").listview("refresh");
        $("input[data-type='search']").unbind('keyup', groupSelectHandler);
    }

    $(document).ready(function () {
        $("#groupSelectList").listview({
            filter: true,
            filterPlaceholder: ''

        });

        $('#groupSelectList').children('li').on('click', function () {
            $('#groupName').val($(this).text());
            $("input[data-type='search']").val($(this).text());
            $("#groupSelectList").listview().hide();
            $("input[data-type='search']").bind('keyup', groupSelectHandler);
        });
    });

You can see in this example that when click is fired groupSelectHandler is bound to keyup. When keyup fires it shows the list and removes the keyup event.

Liorsion · Accepted Answer · 2013-11-06 10:38:14Z

1

A possible, much simpler solution might be:

$( document ).on( "pageinit", "#myPage", function() {
    $('#groupName').val($(this).text());
        $("input[data-type='search']").val($(this).text());;
    $('#groupSelectList li').each(function (index) {
        $(this).addClass("ui-screen-hidden");
    });
});

answered Nov 6, 2013 at 10:38

Liorsion

5825 silver badges9 bronze badges

Collectives™ on Stack Overflow

jQuery listview - how to hide list when item is clicked

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related