我正在制作一个JQM自动完成,其中有四个字段,即firstname,lastname,email,cell。当用户在名称字段中搜索时,JQM自动完成从我的API中提取数据:
当用户点击任何列表项时,它会将数据放入字段...
以下是我所做的:
HTML代码:
<form class="ui-filterable">
<input id="autocomplete-input" data-type="text" placeholder="First Name">
<input id="lastname" data-type="text" placeholder="Last Name">
<input type="text" name="email" id="email" placeholder="Email">
<input type="text" name="cell" id="cell" placeholder="Cell">
</form>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-input="#autocomplete-input"></ul>
JQM代码:
$( document ).on( "pagecreate", "#myPage", function() {
$(document).on("click", "li", function () {
var text = $(this).text();
siteName = text.split(',');
$(this).closest("ul").prev("form").find("input").val(siteName[0]);
$("#autocomplete li" ).addClass('ui-screen-hidden');
$("#lastname").val(siteName[1]);
$("#email").val(siteName[2]);
$("#cell").val(siteName[3]);
//$("#autocomplete").val(siteName);
});
$( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
if ( value && value.length > 0 ) {
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
$ul.listview( "refresh" );
var url = 'https://www.tor4you.co.il/m/',
mode = 'm2data.asp?u=',
firstName = '&fjax='+value,
key = 'searchtest@tor4you.co.il&p=12345&action=6&siteid=1126';
//alert(url + mode + key + firstName);
console.log(url + mode + key + firstName);
$.ajax({
//url: "http://gd.geobytes.com/AutoCompleteCity",
url: url + mode + key + firstName ,
dataType: "json",
crossDomain: true,
async: true,
success: function (result) {
ajax.parseJSONP(result);
},
error: function (request,error) {
alert('Network error has occurred please try again!');
}
//data: {
//q: $input.val()
//}
})
.then( function ( response ) {
$.each( response, function ( i, val ) {
//val += val.split(',');
html += "<li>" + val + "</li>";
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
});
});
});
请帮助,我在哪里设置回拨功能 但它总是给出网络错误。由于我没有太多经验,我无法理清错误。