使用JQuery和AJAX自动完成文本框

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>&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);
}

1 个解决方案

#1

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

      });