web-dev-qa-db-fra.com

Événement de sélection de saisie semi-automatique jQuery

J'ai créé la saisie semi-automatique jQuery UI qui fonctionne très bien. Mais mon exigence est que ce que j'affiche en tant que liste doit également le sélectionner dans la zone de texte. Mais il ne sélectionne pas Par exemple une liste comme XXX (XYZ) mais quand je le sélectionne, sélectionnez seulement XXX pas XXX (XYZ) ce qui me manque !!

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
});
 }
javascriptjqueryjquery-uiautocomplete
21
Milind

Presque là, il suffit de renvoyer un faux de l'événement sélectionné.

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

ou simplement

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

Cela guidera la saisie semi-automatique de jquery pour savoir que select a défini une valeur.

Mise à jour: Ce n'est pas dans la documentation, j'ai compris en fouillant dans le code source, cela m'a pris un certain temps. Mais en effet, il mérite d'être dans le doc ou dans les options.

38
SSA

Je comprends qu'il a déjà été répondu. mais j'espère que cela aidera quelqu'un à l'avenir et économisera beaucoup de temps et de douleur.

Après avoir obtenu les résultats en saisie semi-automatique, vous pouvez utiliser le code ci-dessous pour conserver la valeur dans le champ de zone de texte de saisie semi-automatique. (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;
        },

le code complet est ci-dessous: Celui-ci, je l'ai fait pour une zone de texte pour le rendre Autocomplete dans CiviCRM. J'espère que cela aide quelqu'un

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

Code PHP sur la façon dont je renvoie les données à cet appel ajqu jquery en saisie semi-automatique:

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

dans ce cas, vous devez des options

  1. le plus évident a défini value:item[Query] + " (" + item.City_Code + ")" mais je suppose que ce n'est pas l'option.

  2. Gérez la sélection par vous-même, vérifiez d'abord le doc api et vous verrez l'événement comme ci-dessous. avec event.target vous pouvez accéder à votre saisie avec ui vous pouvez accéder à l'élément sélectionné.

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