jQuery Autocomplete Auswahl Ereignis

Question

Ich habe erstellt jQuery UI Autocomplete, die sehr gut funktioniert. Aber meine Anforderung ist, dass das, was ich als Liste anzeigen soll, auch im Textfeld dieselbe auswählen sollte. Aber es wählt nicht Zum Beispiel Liste wie XXX (XYZ), aber wenn ich es auswähle, wähle nur XXX nicht XXX (XYZ) was ich vermisse !!

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

Fast da, kehren nur ein falsches von ausgewählten Ereignis.

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

oder einfach

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

Dies wird jquery zur automatischen Vervollständigung führen zu wissen, dass ein Wert auswählen muss.

Answer 2

in diesem Fall müssen Sie auf Optionen

1. die offensichtlichste gesetzt value:item[Query] + " (" + item.City_Code + ")" aber ich gehe davon aus das nicht die Option ist.

2. Handle die Auswahl selbst zuerst überprüfen the api doc und Sie werden Ereignis wie unten sehen. Mit event.target können Sie Ihre Eingabe mit ui zugreifen Sie können auf den ausgewählten Artikel zugreifen.

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

Answer 3

Ich verstehe, es wurde bereits beantwortet. aber ich hoffe, dass dies jemandem in Zukunft helfen wird und so viel Zeit und Schmerz spart.

Nachdem Sie die Ergebnisse der Autovervollständigung erhalten haben, können Sie den folgenden Code verwenden, um den Wert im Textfeld für die automatische Vervollständigung beizubehalten. (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; 
     }, 

vollständige Code ist unten: Dieses, das ich für eine Textbox tat, um es in CiviCRM automatische Vervollständigung zu machen. Hoffe, dass es jemand

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-Code hilft, wie ich Daten zu dieser Jquery Ajax-Aufruf in der automatischen Vervollständigung bin Rückkehr:

/** 
* 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(); 
    } 
}