内部Webアプリケーションのモバイルオプションに取り組んでいます。PC側で自動選択が機能していますが、モバイル側で表示すると、検索結果が表示されたときに見栄えが悪くなります。 形式が正しくありません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自動選択関数:
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();
},