文章/答案/技术大牛

发布

社区首页 >问答首页 >自动完成:用户按回车时如何触发函数？

问自动完成:用户按回车时如何触发函数？
EN

Stack Overflow用户

提问于 2013-08-23 10:35:48

回答 1查看 3.3K关注 0票数 1

下面是jquery移动远程自动完成演示：

http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/listviews/listview-filter-autocomplete.html

我的列表是动态填充从我的数据源很好，我可以做的事情，当用户点击一个结果从列表。

但是，当用户点击enter (或在电话上单击“Go”)时，我也需要它来触发一个函数.我该怎么做？以下是我的当前代码：

$( document ).on( "pageinit", "#myPage", function() {
        $( "#autocomplete" ).on( "click","li",function() {
            // do stuff when user clicks on item in list
            alert('Doing stuff!');                
        });
        $( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
            var $ul = $( this ),
                $input = $( data.input ),
                value = $input.val(),
                html = "";
            $ul.html( "" );
            if ( value && value.length > 2 ) {
                $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
                $ul.listview( "refresh" );
                $.ajax({
                    url: "http://mywebservice/"+$input.val(),
                    dataType: "json",
                    crossDomain: false
                })
                .then( function ( response ) {
                    $.each( response, function ( i, val ) {
                        html += "<li><a href='#'>" + val.display_name + "</a></li>";
                    });
                    $ul.html( html );
                    $ul.listview( "refresh" );
                    $ul.trigger( "updatelayout");
                });
            }
        });
});

我一直在寻找帮助，但大多数结果都是讨论jquery自动完成，而不是jquery移动列表视图自动完成.

任何帮助都将非常感谢-thanks！

javascript

jquery

jquery-mobile

autocomplete

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-08-23 14:52:27

嘿，我用了一个本地的自动完成的jQM小部件，但是这对你来说也是一样的-

HTML -

<div data-role="page" id="carPage">
    <div data-role="content">
        <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a car..." data-filter-theme="d">
            <li><a href="acura.html">Acura</a></li>
            <li><a href="audi.html">Audi</a></li>
            <li><a href="bmw.html">BMW</a></li>
            <li><a href="bmw.html">Cadillac</a></li>
            <li><a href="bmw.html">Ferrari</a></li>
            <li><a href="bmw.html">Honda</a></li>
        </ul>
    </div>
 </div>

JS -

$(function () {
    $('#carPage input[data-type="search"]').on('keydown', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
         if (code == 13) { //Enter keycode
             alert('enter key was pressed');
         }
    });
});

jsFiddle演示

/Update

关于go按钮，因为autocomplete小部件在内容周围包装了一个表单元素，go按钮将在form上触发一个submit。这意味着您可以通过下面这样的简单事件处理程序来监听enter键按下并按go按钮-

$("#carPage form").submit(function() {
    // this will handle both the enter key and go button on device
});

我用上述两种方法更新了jsFiddle演示。我最喜欢第二种方法，因为它最容易处理这两种情况。

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18400704

复制

相似问题

问自动完成:用户按回车时如何触发函数？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动完成:用户按回车时如何触发函数？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动完成:用户按回车时如何触发函数？
EN