Question

我正在使用jQuery创建listview和过滤器。如果用户单击某个项目，我希望过滤器将文本设置为单击的项目并隐藏列表。但不是永久的！如果用户更改过滤器文本，则列表需要返回。

这就是我所拥有的：

    $(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.
        });
    });

...

此页面上的小部件是我正在使用的控件的示例： http://view.jquerymobile.com/master/demos/

Answer 1

我想出了如何实现这一目标。如果有人感兴趣，为了让jQuery移动列表视图控件在点击时消失然后重新出现在更改中我将临时键盘事件绑定到搜索框。我的代码现在看起来像这样：

    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);
        });
    });

您可以在此示例中看到，当触发click时，groupSelectHandler绑定到keyup。当keyup触发时，它会显示列表并删除keyup事件。

Answer 2

一个可能的，更简单的解决方案可能是：

$( 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");
    });
});

jQuery listview - 单击项目时如何隐藏列表

2 个答案: