user interface - Jquery UI autocomplete does not select all field text -

i have problem jquery ui autocomplete: selects start of text typed in field (characters preselection), not whole text. example : "stra" selected instead of "strategy".

here js code:

$(document).ready(function() {      function dotag(iid, slibelle) {        $.ajax({          type: "get",         url: "../../bobookmarks/content/json/put_tag_in_session.php",          contenttype : "application/json; charset=utf-8",          datatype: "json",          data: {iid: iid,                slibelle : slibelle },         success: function(data) {                          if (data=="erreur") {                              serreur = "une erreur est survenue";                               console.log(serreur + "bo.js:l18");                              alert(serreur);                              return false;                          }                                        },           error: function(jqxhr, textstatus, errorthrown) {             var s = "une erreur est survenue";               alert(s);                        }     })        var sli;     sli = "<li class=\"tags\">";      sli += "<a href=\"#\" title=\"supprimer ce tag\"><span class=\"label label-primary\">"+$("#tag").val()+"</span></a>";      sli += "<a href=\"#\" title=\"supprimer ce tag\" class=\"form_ajout_tag_suppr\"><span class=\"glyphicon glyphicon-remove\"></span></a>";      sli += "</li>";      $("#tags_liste").append(sli);             $("#tag").val("");           return true;  } // -- dotag()   if ($("#tag").length > 0) {                     $("#tag").autocomplete({         minlength:3,         source: function(request,response) {                     $.ajax({                          type        : "get",                         url         : "../../bobookmarks/content/json/get_tags.php",                          contenttype : "application/json; charset=utf-8",                          datatype    : "json",                          data        : { term: $("#tag").val() },                         success     : function(data) {                                          if (data=="erreur") {                                              alert("une erreur est survenue");                                              return false;                                          }                                           response($.map(data,   function(item) {                                              return { id: item.catv_num,                                                      value: item.catv_v_libelle                                                    }                                                                     }) // -- fin response                                         )}, // -- fin success                          error: function(jqxhr, textstatus, errorthrown) {                             var s = "une erreur est survenue";                               console.log(s+" (bo.js:l74)");                                 alert(s);                          }                     }) // -- fin ajax         }, // -- fin source      });           $("#tag").on("autocompleteselect", function(event, ui) {         $("#tags_autocomplete_flag").val(1);         console.log("tags_autocomplete_flag val (dans autocompleteresponse) : "+$("#tags_autocomplete_flag").val());             dotag(ui.id, ui.value);          });      $("#tag").blur( function() {                  console.log("tags_autocomplete_flag val (entrée blur) : "+$("#tags_autocomplete_flag").val());                if ($("#tags_autocomplete_flag").val()==1) {              console.log("tags_autocomplete_flag val (blur(), conditon ==1) : "+$("#tags_autocomplete_flag").val());                 // le tag vient de la base (autocomplétion)                  // la mise en session déjà été traitée ci-dessus (l80 à 84)                // on remet le flag à 0                      $("#tags_autocomplete_flag").val(0);                     } else { // le tag ne vient pas de la base               console.log("tags_autocomplete_flag val (si = 0 condition  else) : "+$("#tags_autocomplete_flag").val());                 dotag(0,  $("#tag").val());                  }                });               }  }); 

thank in advance help.

when call:

dotag(ui.id, ui.value);

this not getting right content. if review api, see:

select( event, ui ) type: autocompleteselect triggered when item selected menu. default action replace text field's value value of selected item.

canceling event prevents value being updated, not prevent menu closing.

event

type: event 

ui

type: object 

item

type: object object label , value properties selected option. 

you should calling:

dotag(ui.id, ui.item.value);

to complete selected value autocomplete list. tested here: https://jsfiddle.net/twisty/bpq3vxd1/