Question

我遇到了Jquery UI自动完成的问题：它只选择在字段中输入的文本的开头（字符预选），而不是整个文本。例如：选择“stra”而不是“strategy”。

这是我的js代码：

$(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 a 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());         
        }           
    });             
 }
 });

提前感谢您的帮助。

Answer 1

致电时：

doTag(ui.id, ui.value);

这不是正确的内容。如果您查看API，则会看到：

select（event，ui）类型：autocompleteselect   从菜单中选择项目时触发。默认操作是将文本字段的值替换为所选项的值。

取消此事件会阻止更新值，但确实如此   不要阻止菜单关闭。

<强>事件
Type: Event
<强> UI
Type: Object
<强>项目
Type: Object
An Object with label and value properties for the selected option.

你应该打电话：

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

从“自动完成”列表中获取完整的选定值。在此测试：https://jsfiddle.net/Twisty/bpq3vxd1/

Jquery UI自动完成不会选择所有字段文本

1 个答案: