Jquery Listbox / Textbox filtern

Ich habe die folgende jquery-Funktion zum filtern der Inhalt einer listbox auf das onkeyup-Ereignis aus einer textbox.

function DoListBoxFilter(listBoxSelector, filter, keys, values) {
    var list = $(listBoxSelector);
    var selectBase = '<option value="{0}">{1}</option>';

    list.empty();
    for (i = 0; i < values.length; ++i) { //add elements from cache if they match filter

        var value = values[i];

        if (value == "" || value.toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
            var temp = String.format(selectBase, keys[i], value);
            list.append(temp);
        }
    }
}

Es funktioniert sehr gut für kleine bis mittlere Listen, aber es ist ein bisschen langsam beim arbeiten mit Listen über 300-400 Elemente... Kann mir jemand helfen mit ein paar Ideen zur Optimierung des javascript ein wenig zu beschleunigen, ist die Funktion?

Die Funktion wird aufgerufen mit folgendem code:

    $('#<% = txtSearch.ClientID %>').keyup(function() {

        var filter = $(this).val();

        DoListBoxFilter('#<% = lstPars.ClientID %>', filter, keys_<% = this.ClientID %>, values_<% = this.ClientID %>);
    });

Diesen zu nutzen, ich Binde eine asp.net listbox und füllen Sie auch zwei javascript-arrays (Schlüssel und Wert) auf der Seite.

Dies IST die Speicherung der Daten an zwei Orten auf der Seite, aber mit dieser Methode bin ich in der Lage, verwenden Sie die postback der listbox um den ausgewählten Wert ohne mit javacript zu extrahieren, die den Wert und cache es in einer versteckten div. (es speichert auch, dass die Funktion beim laden der Seite auf dem browser-clients.. und das ist wirklich die Funktion wo bin ich zu sehen, die Langsamkeit, so dass die Speicherung an zwei stellen beschleunigt den Seitenaufbau)

Ich fand, dass ich brauchte, um das javascript-array-Ansatz, da die meisten Browser nicht erkennen alle versuche, sich zu verstecken eine option-tag... nur Firefox scheint es zu tun.

Ich bin mir nicht sicher, es ist möglich, zu optimieren und die Geschwindigkeit dieser code mehr, aber wenn jemand irgendwelche Ideen hat, würde ich mich freuen.

Dank,
Max Schilling

InformationsquelleAutor Max Schilling | 2009-11-06

Sieht es aus wie Sie vielleicht leiden, in Bezug auf die Leistung bei großen Listen, da Sie anfügen jedes Element ein zu einer Zeit, entspricht dem filter. Ich würde bauen ein array von übereinstimmungen (oder erstellen Sie einen documentFragment) und dann anfügen, dass der DOM in einem Rutsch.

function DoListBoxFilter(listBoxSelector, filter, keys, values) {
    var list = $(listBoxSelector);
    var selectBase = '<option value="{0}">{1}</option>';

    list.empty();
    var i = values.length;
    var temp = [];
    var option, value;
    while (i--) {    
        value = values[i];    
        if (value && value.toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
                option = String.format(selectBase, keys[i], value);
                temp.push(option);
        }
    }
    //we got all the options, now append to DOM
    list.append(temp.join(''));  
}

Dank Russ, das scheint zu laufen ein bisschen schneller für mich. Einzige Problem, das ich hatte war, dass es die umgekehrte Reihenfolge der Elemente in der Liste, aber das war leicht zu beheben.

InformationsquelleAutor Russ Cam

Ich bin auch mit dem gleichen code, um die Liste zu filtern-box, aber mit ein wenig ändern, in meinem ersten code, ich bin den Vergleich der gesuchte Wert/Wort, mit der option, Elemente und, wenn match bekam Erfolg dann nur das filtern der Liste.

var existText = values[i].substring(0, filter.length);


if (existText.toLowerCase() == filter.toLowerCase())

Unten ist der komplette code:

function DoListBoxFilter(listBoxSelector, filter, keys, values) {

  var list = $(listBoxSelector);
  var selectBase = '<option value="{0}">{1}</option>';

  list.empty();
  for (i = 0; i < values.length; ++i) {

    var existText = values[i].substring(0, filter.length);

    if (existText.toLowerCase() == filter.toLowerCase()) {

        var value = values[i];
        if (value === "" || value.toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
            var temp = '<option value="' + keys[i] + '">' + value + '</option>';
            list.append(temp);
        }
    }
  }    
 }

var keys = [];
var values = [];

var options = $('#CountryList option');
$.each(options, function (index, item) {
  keys.push(item.value);
  values.push(item.innerHTML);
});

$(document).ready(function () {
  $('input#CountrySearch').on('keyup', function () {
    var filter = $(this).val();
    DoListBoxFilter('#CountryList', filter, keys, values);
  });
});

Kann man auch eine demo sehen hier. In dieser demo benutzt habe ich eine Liste, in der mehr als 500-Liste, die Elemente und Ihre Ordnung arbeiten, ohne jedes performance-Problem.

InformationsquelleAutor Jitender Kumar

Folgenden link hat mir geholfen, aber es ist javascript.

Suche ListBox-Elemente mit JavaScript

<head id="Head1" runat="server">
    <title>Demo</title>
</head>

<script type="text/javascript" language="javascript"> 

    function SearchList()
    {
        var l =  document.getElementById('<%= ListBox1.ClientID %>');
        var tb = document.getElementById('<%= TextBox1.ClientID %>');
        if(tb.value == ""){
            ClearSelection(l);
        }
        else{
            for (var i=0; i < l.options.length; i++){
                if (l.options[i].value.toLowerCase().match(tb.value.toLowerCase()))
                {
                    l.options[i].selected = true;
                    return false;
                }
                else
                {
                    ClearSelection(l);
                }
            }
        }
    }

    function ClearSelection(lb){
        lb.selectedIndex = -1;
    }

</script>
<body> 
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server" onkeyup="return SearchList();"/><br />
    <asp:ListBox ID="ListBox1" runat="server" Height="150px" Width="250px">
    <asp:ListItem>Vincent</asp:ListItem>
    <asp:ListItem>Jennifer</asp:ListItem>
    <asp:ListItem>Shynne</asp:ListItem>
    <asp:ListItem>Christian</asp:ListItem>
    <asp:ListItem>Helen</asp:ListItem>
    <asp:ListItem>Vladi</asp:ListItem>
    <asp:ListItem>Bee</asp:ListItem>
    <asp:ListItem>Jerome</asp:ListItem>
    <asp:ListItem>Vinz</asp:ListItem>
    <asp:ListItem>Churchill</asp:ListItem>
    <asp:ListItem>Rod</asp:ListItem>
    <asp:ListItem>Mark</asp:ListItem>
    </asp:ListBox>
    </form>
</body>
</html>

InformationsquelleAutor S.A. Khalili

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.