jQuery evento selezione completamento automatico

Question

Ho creato il completamento automatico dell'interfaccia utente jQuery che funziona molto bene. Ma il mio requisito è che ciò che mostro come lista dovrebbe anche selezionare lo stesso nella casella di testo. Ma non sta selezionando Per esempio lista come XXX (XYZ) ma quando seleziono seleziono solo XXX non XXX (XYZ) quello che mi manca !!

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

Ci siamo quasi, solo restituire un falso dal Seleziona evento.

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

o semplicemente

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

Questo vi guiderà jQuery completamento automatico per sapere che selezionare è impostare un valore.

Answer 2

in questo caso è necessario opzioni

1. la più ovvia impostato value:item[Query] + " (" + item.City_Code + ")" ma io parto dal presupposto che non è l'opzione.

2. Gestire la selezione da soli prima controllare the api doc e si vedrà l'evento come di seguito. con event.target è possibile accedere ai propri input con ui è possibile accedere alla voce selezionata.

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

Answer 3

Capisco che abbia già ricevuto una risposta. ma spero che questo aiuti qualcuno in futuro e risparmia così tanto tempo e dolore.

Dopo aver ottenuto i risultati in completamento automatico è possibile utilizzare il codice riportato di seguito per mantenere il valore nel campo della casella di testo a completamento automatico. (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; 
     }, 

codice completo è qui sotto: Questo l'ho fatto per una casella di testo per renderlo automatico in CiviCRM. Speranza che aiuta qualcuno codice

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 su come sto restituzione dei dati a questa chiamata ajax jquery nel completamento automatico:

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