JQuery自動填充建議沒有排序

Question

我遇到了使用JQuery UI排序自動完成結果的問題。

從上圖中，當用戶決定搜索大蒜並開始輸入「g」時，應首先顯示「大蒜」，而不是先打開蛋。

查看我的代碼。所以我認爲這是問題的所在在一個點ingredient.txt成分按字母順序排序..

我如何去了解這個

$(function() { 
    jQuery.get('ingredients.txt', function(data) { 
     var availableTags = data.split(', '); 
     availableTags = availableTags.sort();   
     //console.log("The available Tag are "+ availableTags); 
     function split(val) { 
      return val.split(","); 
     } 
     function extractLast(term) { 
      return split(term).pop().sort(); 
     } 
     // don't navigate away from the field on tab when selecting an item     
     $("#tags").bind("keydown", function(event) { 
      if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) { 
       event.preventDefault(); 
      } 
     }).autocomplete({ 
      minLength: 0, 
      source: function(request, response) { 
       // delegate back to autocomplete, but extract the last term 
       response($.ui.autocomplete.filter(
       availableTags, extractLast(request.term))); 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = split(this.value); 
       // remove the current input 
       terms.pop(); 
       // add the selected item 
       // var projectDiv = '<div class="projectBody" id="selectedItems">'+ ui.item.value +'</div>'; 
       terms.push(ui.item.value);         
       for(var i = 0; i < terms.length; i++) { 
        var elements = terms[i];       
       } 
       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       //$("#tags").val().wrap("<div class='new'>nn</div>"); 
       this.value = terms.join(",");        
       return false; 
      } 
     }); 
    }); 
}); 

Answer 1

經過多番尋找這是我想出了。

<script type="text/javascript"> 

        $(function() { 
         jQuery.get('ingredients.txt', function(data) { 
         var availableTags = data.split(', '); 
         availableTags = availableTags.sort();   
         //console.log("The available Tag are "+ availableTags); 
         function split(val) { 
          return val.split(", "); 
         } 
         function extractLast(term) { 
          return split(term).pop(); 
         }       
         $("#tags") 
          // don't navigate away from the field on tab when selecting an item 
          .bind("keydown", function(event) { 
          if (event.keyCode === $.ui.keyCode.TAB && 
           $(this).autocomplete("instance").menu.active) { 
           event.preventDefault(); 
          } 
          }) 
          .autocomplete({ 
          minLength: 0, 
          source: function(request, response) { 
           var term = $.ui.autocomplete.escapeRegex(extractLast(request.term)) 
            // Create two regular expressions, one to find suggestions starting with the user's input: 
            , startsWithMatcher = new RegExp("^" + term, "i") 
            , startsWith = $.grep(availableTags, function(value) { 
             return startsWithMatcher.test(value.label || value.value || value); 
            }) 
            // ... And another to find suggestions that just contain the user's input: 
            , containsMatcher = new RegExp(term, "i") 
            , contains = $.grep(availableTags, function (value) { 
             return $.inArray(value, startsWith) < 0 && 
              containsMatcher.test(value.label || value.value || value); 
            });    

           // Supply the widget with an array containing the suggestions that start with the user's input, 
           // followed by those that just contain the user's input. 
           response(startsWith.concat(contains)); 
          }, 
          focus: function() { 
           // prevent value inserted on focus 
           return false; 
          }, 
          select: function(event, ui) { 
           var terms = split(this.value); 
           // remove the current input 
           terms.pop(); 
           // add the selected item 
          // var projectDiv = '<div class="projectBody" id="selectedItems">'+ ui.item.value +'</div>'; 
           terms.push(ui.item.value);         
           for(var i = 0; i < terms.length; i++) 
           { 
            var elements = terms[i];       
           } 
           console.log('<div class="projectBody" id="selectedItems">'+ ui.item.value +'</div>'); 
           $("#selectedItems").css("backgroundColor", "blue");       
           // add placeholder to get the comma-and-space at the end 
           terms.push("");       
           this.value = terms.join(",");         
           return false; 
          } 
          }); 
         }); 
       }); 

       </script>