使用JQuery和AJAX的自動完成文本框

Question

我使用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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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); 
} 

Answer 1

試試這個

$.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}             
      })); 
      } 

     });