Come ordinare alfabeticamente un'interfaccia utente JQuery ordinabile?

Question

Mi chiedevo se è possibile avere un'impostazione predefinita ordinabile nell'interfaccia utente JQuery per essere ordinata alfabeticamente. Se è così, è anche possibile mantenerlo in ordine alfabetico in tempo reale se aggiungo elementi all'ordinabile? Di seguito è il mio codice:

// Adds item to sortable list 
$(".addButton").click(function(e) { 
    e.preventDefault(); 
    // set var item to be the string inputted by the user 
    var item = $("input[name='brewItem']").val(); 
    // parses input string, splitting at commas into liArray containing substrings as elements 
    var liArray = item.split(", "); 
    // for loop to add each brew to the sortable list (length-1 because last element in array is empty string) 
    for (var i = 0; i < liArray.length-1; i++) { 
     // sets var $li to the string in the ith index of liArray 
     var $li = $("<li class='ui-state-default'/>").text(liArray[i]); 



     // adds var $li to gui 
     $("#sortable").append($li); 
    }; 
    // refreshes the page so var $li shows up 
    $("#sortable").sortable("refresh"); 
}); 

Non sono abbastanza sicuro di dove o come implementarlo. Qualsiasi aiuto è apprezzato, grazie!

Answer 1

È necessario modificarlo per renderlo ordinabile in base alle proprie esigenze.

Prova questo: - un ordine Fiddle

Usa personalizzato

function sort() { 
    var sortableList = $('#sortable'); 
    var listitems = $('li', sortableList); 

    listitems.sort(function (a, b) { 

     return ($(a).text().toUpperCase() > $(b).text().toUpperCase()) ? 1 : -1; 
    }); 
    sortableList.append(listitems); 

} 

Chiamatelo nel vostro sortable di Crea evento Create e fare clic sul pulsante

$("#sortable").sortable({ 
    create: function (event, ui) { 
     sort(); 
    } 
}); 

o estendere jQuery UI widget di ordinabile a includi la tua logica di ordinamento personalizzata.

Answer 2

instantiate ordinabile

var $sortable =$("#sortable").sortable(options); 

non sopraffare il browser con accesso non necessario alla dom

prima di gestore di eventi, Cache vostro input

var $brew=$("input[name='brewItem']"); 

ottimizzare l'apposizione creando un html stringa

è possibile utilizzare join & farlo in una riga nel gestore

$('<li>'+ $brew.val().split(", ").join('</li><li>')+'</li>').appendTo($sortable) ; 

nb: perf sarebbe meglio è il set di Li è stato avvolto, ma nel tuo caso avresti bisogno di scartare dopo ... non si può dire che sarebbe più veloce

$sortable.sortable('refresh')