I write a code for autocomplete textbox in php using JQUERY: in which i want, whenver i press a key on textbox it must show the matching data from database, and when i select a value from a suggested list it must fill the corresponding value in respective control . But autocomplete list is not appeared: this is my code:
我使用JQUERY在php中编写自动完成文本框的代码:我想要的是,当我按下文本框上的键时,它必须显示来自数据库的匹配数据,当我从建议列表中选择一个值时,它必须填写相应的值各自的控制。但是没有出现自动完成列表:这是我的代码:
page 1:
$(document).ready(function() {
$('#add_event_customer_name').autocomplete({
source: function( request, response ){
$.ajax(
{
url: "getCustomerDetail.php?"+request.term ,
data: { "term" : request.term },
type: "POST",
dataType: "json",
success: function (data) {
response( $.map( data, function( item ) {
return {value: item.value}
}));
}
});
} ,
minLength: 2,
open: function (event, ui) {
$(this).autocomplete("widget").css({
"width": 344,
"font-size": 11,
"font-family": "Arial"
});
},
select:function(event,ui)
{
// when a customer name is selected, populate related fields in respective control
this.createeventform.add_event_customer_phone.value = ui.item.phone;
this.createeventform.add_event_customer_mobile.value = ui.item.mobile;
this.createeventform.add_event_customer_email.value = ui.item.email;
this.createeventform.add_event_customer_fax.value = ui.item.fax;
this.createeventform.add_event_customer_address.value = ui.item.address;
}
});
//html code on same page
<td align="left" valign="top">
<div style="float:right;padding:4px"><label>Customer Name:</label> <input type="text" value="oracle" name="event_customer_name" id="add_event_customer_name" class="validate[required,custom[onlyLetter]] text ui-widget-content ui-corner-all"/></div>
<div style="float:right;padding:4px"><label>Phone:</label> <input type="text" name="event_customer_phone" id="add_event_customer_phone" class="validate[required,custom[telephone]] text ui-widget-content ui-corner-all" /></div>
</td>
<td align="right" valign="top">
<div style="float:right;padding:4px"><label>Email Address:</label> <input type="text" name="event_customer_email" id="add_event_customer_email" class="validate[required,custom[email],ajax[ajaxCustEmail]] text ui-widget-content ui-corner-all" /></div>
<div style="float:right;padding:4px"><label>Mobile Number:</label> <input type="text" name="event_customer_mobile" id="add_event_customer_mobile" class="validate[required,custom[telephone]] text ui-widget-content ui-corner-all" /></div>
</td>
</tr>
<tr>
<td align="left" valign="top">
<div style="float:right;padding:4px"><label>Fax:</label> <input type="text" name="event_customer_fax" id="add_event_customer_fax" class="validate[optional,custom[onlyNumber]] text ui-widget-content ui-corner-all" /></div>
</td>
<td align="right" valign="top">
<div style="float:right;padding:4px"><label>Customer Address:</label> <textarea cols="40" rows="6" name="event_customer_address" id="add_event_customer_address" class="validate[required] text ui-widget-content ui-corner-all"></textarea></div>
</td>
mysqlcode to retrieve data getcustomerdetail.php
function getCustomerDetail($_REQUEST)
{
$name=$_REQUEST['term'];
$customer="SELECT id,name,email,phone,mobile,fax,address FROM customer where name like '".$name."%'";
$cust_query=$db->fetch_array($customer);
if(!empty($cust_query))
{
$data[]=array(
'value'=>$cust_query['name'],
'email'=>$cust_query['email'],
'phone'=>$cust_query['phone'],
'mobile'=>$cust_query['mobile'],
'fax'=>$cust_query['fax'],
'address'=>$cust_query['address']
);
}
echo json_encode($data);
}
1 个解决方案
#1
0
Try this
$.ajax(
{
url: "getCustomerDetail.php?"+request.term ,
data:'{ "term" :"'+ request.term+'" }',
type: "POST",
dataType: "json",
success: function (data) {
response( $.map( data, function( item ) {
return {value: item}
}));
}
});
#1
0
Try this
$.ajax(
{
url: "getCustomerDetail.php?"+request.term ,
data:'{ "term" :"'+ request.term+'" }',
type: "POST",
dataType: "json",
success: function (data) {
response( $.map( data, function( item ) {
return {value: item}
}));
}
});