jQuery自动完成选择事件

Question

我已经创建了jQuery UI自动完成工作非常好。但我的要求是，我显示为列表也应选择相同的文本框中。但它不是选择 例如列表像XXX（XYZ），但是当我选择它只选择XXX不是XXX（XYZ） 我失踪！

function getDeptStations() { 
$("#txDestination").autocomplete({ 
    source: function (request, response) { 
    var term = request.term; 
    var Query = ""; 
    if (lang === "en") 
     Query = "City_Name_EN"; 
    else if (lang === "fr") 
     Query = "City_Name_FR"; 
    if (lang === "de") 
     Query = "City_Name_DE"; 
    if (lang === "ar") 
     Query = "City_Name_AR"; 
    var requestUri = "/_api/lists/getbytitle('Stations')/items?$select=City_Code," + Query + "&$filter=startswith(" + Query + ",'" + term + "')"; 
    $.ajax({ 
     url: requestUri, 
     type: "GET", 
     async: false, 
     headers: { 
     "ACCEPT": "application/json;odata=verbose" 
     } 
    }).done(function (data) { 
     if (data.d.results) { 
     response($.map(eval(data.d.results), function (item) { 
      return { 
      label: item[Query] + " (" + item.City_Code + ")", 
      value: item[Query], 
      id: item[Query] 
      } 
     })); 
     } 
     else { 

     } 
    }); 
    }, 
    response: function (event, ui) { 
    if (!ui.content.length) { 
     var noResult = { value: "", label: "No cities matching your request" }; 
     ui.content.push(noResult); 
    } 
    }, 
    select: function (event, ui) { 
    $("#txDestination").val(ui.item.label); 
      cityID = ui.item.id; 
    }, 
    minLength: 1 
}); 
} 

Answer 1

快到了，刚刚从选择事件中返回一个错误。

select: function (event, ui) { 
    $("#txDestination").val(ui.item.label); 
      cityID = ui.item.id; 
    return false; 
    }, 

或者干脆

select: function (event, ui) {   
      alert(ui.item.id); 
      return false; 
    }, 

这将引导jquery的自动完成知道选择已经设定的值。

Answer 2

在这种情况下

，你必须选择

1. 明显的一个设置value:item[Query] + " (" + item.City_Code + ")"但我假定这是不是选项。

2. 自己处理选择首先检查the api doc，你会看到像下面这样的事件。与event.target你可以通过ui访问你的输入，你可以访问你选择的项目。

   $(".selector").autocomplete({ 
       select: function(event, ui) {} 
   }); 
   

Answer 3

我知道它已被回答。但我希望这将有助于未来的人，并节省了如此多的时间和痛苦。

在自动完成中获得结果后，您可以使用下面的代码保留自动填充文本框字段中的值。 (you can replace 'CRM.$' with '$' or 'jQuery' depending on your jQuery version)

select: function (event, ui) { 
       var label = ui.item.label; 
       var value = ui.item.value; 

       //assigning the value to hidden field for saving the id 
       CRM.$('input[name=product_select_id]').val(value); 
       //keeping the selected label in the autocomplete field 
       CRM.$('input[id^=custom_78]').val(label); 
       return false; 
     }, 

完整的代码如下：这一次我做了一个文本框，使其自动完成的CiviCRM。希望它可以帮助对我是如何自动完成将数据返回到这个jQuery AJAX调用某人

CRM.$('input[id^=custom_78]').autocomplete({ 
      autoFill: true, 
      select: function (event, ui) { 
        var label = ui.item.label; 
        var value = ui.item.value; 
        // Update subject field to add book year and book product 
        var book_year_value = CRM.$('select[id^=custom_77] option:selected').text().replace('Book Year ',''); 
        //book_year_value.replace('Book Year ',''); 
        var subject_value = book_year_value + '/' + ui.item.label; 
        CRM.$('#subject').val(subject_value); 
        CRM.$('input[name=product_select_id]').val(ui.item.value); 
        CRM.$('input[id^=custom_78]').val(ui.item.label); 
        return false; 
      }, 
      source: function(request, response) { 
       CRM.$.ajax({ 
        url: productUrl, 
         data: { 
             'subCategory' : cj('select[id^=custom_77]').val(), 
             's': request.term, 
            }, 
        beforeSend: function(xhr) { 
         xhr.overrideMimeType("text/plain; charset=x-user-defined"); 
        }, 

        success: function(result){ 
           result = jQuery.parseJSON(result); 
           //console.log(result); 
           response(CRM.$.map(result, function (val,key) { 
                 //console.log(key); 
                 //console.log(val); 
                 return { 
                   label: val, 
                   value: key 
                 }; 
               })); 
        } 
       }) 
       .done(function(data) { 
        if (console && console.log) { 
        // console.log("Sample of dataas:", data.slice(0, 100)); 
        } 
       }); 
      } 
    }); 

PHP代码：

/** 
* This class contains all product related functions that are called using AJAX (jQuery) 
*/ 
class CRM_Civicrmactivitiesproductlink_Page_AJAX { 
    static function getProductList() { 
     $name = CRM_Utils_Array::value('s', $_GET); 
    $name = CRM_Utils_Type::escape($name, 'String'); 
    $limit = '10'; 

     $strSearch = "description LIKE '%$name%'"; 

     $subCategory = CRM_Utils_Array::value('subCategory', $_GET); 
    $subCategory = CRM_Utils_Type::escape($subCategory, 'String'); 

     if (!empty($subCategory)) 
     { 
       $strSearch .= " AND sub_category = ".$subCategory; 
     } 

     $query = "SELECT id , description as data FROM abc_books WHERE $strSearch"; 
     $resultArray = array(); 
     $dao = CRM_Core_DAO::executeQuery($query); 
     while ($dao->fetch()) { 
      $resultArray[$dao->id] = $dao->data;//creating the array to send id as key and data as value 
     } 
     echo json_encode($resultArray); 
    CRM_Utils_System::civiExit(); 
    } 
}