1

クライアント側で C# と JavaScript を使用して、独自のオートコンプリート テキスト ボックス コントロールをプログラミングしています。クライアント側では、ユーザーが検索していた文字に一致する文字列内の文字を置き換えて強調表示したいと考えています。たとえば、ユーザーが「bue」という文字を検索していた場合、「marbuel」という単語のこの文字を次のように置き換えたいとします。

mar<span style="color:#81BEF7;font-weight:bold">bue</span>l

一致する部分に別の色を与えるために。オートコンプリートに 100 ～ 200 個のアイテムがある場合、これはかなりうまく機能しますが、500 個以上になると時間がかかりすぎます。

次のコードは、このロジックを実行する私のメソッドを示しています。

 HighlightTextPart: function (text, part) {
    var currentPartIndex = 0;
    var partLength = part.length;
    var finalString = '';
    var highlightPart = '';
    var bFoundPart = false;
    var bFoundPartHandled = false;
    var charToAdd;
    for (var i = 0; i < text.length; i++) {
        var myChar = text[i];
        charToAdd = null;
        if (!bFoundPart) {
            var myCharLower = myChar.toLowerCase();
            var charToCompare = part[currentPartIndex].toLowerCase();
            if (charToCompare == myCharLower) {
                highlightPart += myChar;
                if (currentPartIndex == partLength - 1)
                    bFoundPart = true;

                currentPartIndex++;
            }
            else {
                currentPartIndex = 0;
                highlightPart = '';
                charToAdd = myChar;
            }
        }
        else
            charToAdd = myChar;

        if (bFoundPart && !bFoundPartHandled) {
            finalString += '<span style="color:#81BEF7;font-weight:bold">' + highlightPart + '</span>';
            bFoundPartHandled = true;
        }

        if (charToAdd != null)
            finalString += charToAdd;
    }
    return finalString;
},

このメソッドは、一致する部分の最初の出現のみを強調表示します。私は次のように使用します。リクエストがサーバーから戻ってきたら、各アイテムをループして一致するアイテムを含む html UL リストを作成し、各ループでこのメソッドを呼び出して一致する部分を強調表示します。

私が言ったように、最大​​100個のアイテムはかなりいいですが、500個以上には多すぎます.

速くする方法はありますか？多分正規表現または他の技術を使用して？

また、「setTimeOut」を使用して追加の機能で実行するか、現在表示されているアイテムに対してのみ実行することも考えました。これは、スクロールする必要があるアイテムがいくつかしか表示されていないためです。

4

3 に答える 3

0

JavaScript での文字列の置換は、以下を使用すると非常に簡単String.replace()です。

function linkify(s, part)
{
    return s.replace(part, function(m) {
        return '<span style="color:#81BEF7;font-weight:bold">' + htmlspecialchars(m) + '</span>';
    });
}

function htmlspecialchars(txt)
{
    return txt.replace('<', '&lt;')
        .replace('>', '&gt;')
        .replace('"', '&quot;')
        .replace('&', '&amp;');
}

console.log(linkify('marbuel', 'bue'));
于 2013-05-04T16:51:45.903 に答える
0

たとえば、表示されるリストのサイズを制限してみてください。たとえば、最大 100 項目しか表示されません。使いやすさの観点からすると、おそらく 20 項目まで減るので、それよりもさらに高速になります。クラスの使用も検討してください。パフォーマンスが向上するかどうかを確認してください。だから代わりに

mar<span style="color:#81BEF7;font-weight:bold">bue</span>l

あなたはこれを持っています：

mar<span class="highlight">bue</span>l
于 2013-05-04T16:44:59.597 に答える