Question

我正在为内部网络应用程序开发移动选项。我在PC端有一个自动选择工作，但在移动端查看时，搜索结果在显示时看起来很糟糕： bad format http://www.rkrdevel.com/files/mobile_autoselect.png

最理想的情况是，我希望列表视图看起来更像是一个下拉列表。当在手机上显示时，我知道它可能会列在键盘下方，但现在就可以了。

我在我的主网站和移动网站上都使用了相同的代码片段。为了确定它是否是移动设备，我调用了一个名为check_mobile（）的函数。

我在某个地方找到了自动选择代码，但我不确定如何将格式应用于结果集。任何帮助表示赞赏。

HTML：

<div class="ui-widget">
    <p>To find a customer, enter the Customer name, all lower case and no spaces. For example, bwi or t&r</p>
    <label for="Customer">Customer Name: </label>
    <input id="Customer" placeholder="Search"/>
    <div class="ui-widget" id="results" style="width: 600px; font-weight: bold; border-bottom: black;">Search Results: </div>
    <div data-theme="b" id="custData"  data-collapsed="true" data-role="collapsible"></div><!--class="ui-widget-content"-->
</div>

jquery autoselect功能：

init: function(){
    $('#results').hide();
    $( "#Customer" ).val('');
    $( "#Customer" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            delay: 500,
            source: function( request, add ) {
                $.getJSON( cust.url+"?funct=1" , {term: cust.extractLast( request.term )}, function(data) {  
                    //create array for response objects  
                    var suggestions = [];  
                    //process response
                   for(var i =1, ii=data[0];i<=ii;i++){
                        suggestions.push(data[i].ABAN8 + ':' + $.trim(data[i].ABDC));
                    }  
                    //pass array to callback  
                    add(suggestions);
                });
            },
            search: function() {
                // custom minLength
                $( "#custData" ).hide();
                $('#results').hide();
                var term = cust.extractLast( this.value );
                if ( term.length < 2 ) {
                    cust.clearReportData();
                    return false;
                }
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = cust.split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                cust.getfulldetail(ui.item.value);
                return false;
            }
        })
        .focus();
},

Answer 1

JQM有许多自动完成解决方案，您需要查看JQM autocomplete或this implementation。

Answer 2

此处的具体问题是您忘记将css文件添加到您的解决方案中，并且排序很重要，例如

  <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.9.2.custom.css" />

JQuery Mobile：格式自动完成结果

2 个答案: