如何实现模糊搜索等崇高文本?

时间:2013-06-04 00:10:05

标签: javascript jquery-select2

如何在select2上实现类似sublime的模糊搜索?

示例,输入“sta jav sub”将匹配“Stackoverflow javascript sublime like”

7 个答案:

答案 0 :(得分:23)

这是一个替代匹配功能。 http://jsfiddle.net/trevordixon/pXzj3/4/

function match(search, text) {
    search = search.toUpperCase();
    text = text.toUpperCase();

    var j = -1; // remembers position of last found character

    // consider each search character one at a time
    for (var i = 0; i < search.length; i++) {
        var l = search[i];
        if (l == ' ') continue;     // ignore spaces

        j = text.indexOf(l, j+1);     // search for character & update position
        if (j == -1) return false;  // if it's not found, exclude this item
    }
    return true;
}

这个更快(根据Chrome中的this test),如果您要过滤很多项目,这可能会变得很重要。

答案 1 :(得分:12)

select2允许您实现自己的“匹配器”功能(as seen on their docs),使用它和一些正则表达式可以执行以下操作:

$("#element").select2({
    matcher: function(term, text, opt) {
        //We call to uppercase to do a case insensitive match
        //We replace every group of whitespace characters with a .+
        //matching any number of characters
        return text.toUpperCase().match(term.toUpperCase().replace(/\s+/g, '.+'));
    }
});

在过滤/搜索列表时,会针对每个select2列表元素调用matcher函数,您可以使用该函数实现任何类型的自定义搜索。

答案 2 :(得分:7)

我写了一些非常长的Sublime Text的模糊匹配。实现这一目标需要做一些事情。

首先,按顺序匹配模式中的所有字符。其次,得分匹配使得某些匹配的角色比其他角色更有价值。

我想出了一些要检查的因素。分隔符(空格或下划线)后面的“CamelCase”字母或字母值得很多。连续比赛更有价值。在开始附近发现的结果值得更多。

一个至关重要的技巧是找到最匹配的角色。这不一定是第一个。考虑fuzzy_match(“tk”,“The Black Knight”)。有两个K可以匹配。第二个是值得更多的点,因为它遵循一个空间。

JavaScript代码如下。有一些细微差别在博客文章中有更详细的描述。还有一个互动演示。和完整的源代码(包括演示,加上C ++实现)在GitHub上。

  • Blog Post
  • Interactive Demo
  • GitHub

    // Returns [bool, score, formattedStr]
    // bool: true if each character in pattern is found sequentially within str
    // score: integer; higher is better match. Value has no intrinsic meaning. Range varies with pattern. 
    //        Can only compare scores with same search pattern.
    // formattedStr: input str with matched characters marked in <b> tags. Delete if unwanted.
    
    function fuzzy_match(pattern, str) {
        // Score consts
        var adjacency_bonus = 5;                // bonus for adjacent matches
        var separator_bonus = 10;               // bonus if match occurs after a separator
        var camel_bonus = 10;                   // bonus if match is uppercase and prev is lower
        var leading_letter_penalty = -3;        // penalty applied for every letter in str before the first match
        var max_leading_letter_penalty = -9;    // maximum penalty for leading letters
        var unmatched_letter_penalty = -1;      // penalty for every letter that doesn't matter
    
        // Loop variables
        var score = 0;
        var patternIdx = 0;
        var patternLength = pattern.length;
        var strIdx = 0;
        var strLength = str.length;
        var prevMatched = false;
        var prevLower = false;
        var prevSeparator = true;       // true so if first letter match gets separator bonus
    
        // Use "best" matched letter if multiple string letters match the pattern
        var bestLetter = null;
        var bestLower = null;
        var bestLetterIdx = null;
        var bestLetterScore = 0;
    
        var matchedIndices = [];
    
        // Loop over strings
        while (strIdx != strLength) {
            var patternChar = patternIdx != patternLength ? pattern.charAt(patternIdx) : null;
            var strChar = str.charAt(strIdx);
    
            var patternLower = patternChar != null ? patternChar.toLowerCase() : null;
            var strLower = strChar.toLowerCase();
            var strUpper = strChar.toUpperCase();
    
            var nextMatch = patternChar && patternLower == strLower;
            var rematch = bestLetter && bestLower == strLower;
    
            var advanced = nextMatch && bestLetter;
            var patternRepeat = bestLetter && patternChar && bestLower == patternLower;
            if (advanced || patternRepeat) {
                score += bestLetterScore;
                matchedIndices.push(bestLetterIdx);
                bestLetter = null;
                bestLower = null;
                bestLetterIdx = null;
                bestLetterScore = 0;
            }
    
            if (nextMatch || rematch) {
                var newScore = 0;
    
                // Apply penalty for each letter before the first pattern match
                // Note: std::max because penalties are negative values. So max is smallest penalty.
                if (patternIdx == 0) {
                    var penalty = Math.max(strIdx * leading_letter_penalty, max_leading_letter_penalty);
                    score += penalty;
                }
    
                // Apply bonus for consecutive bonuses
                if (prevMatched)
                    newScore += adjacency_bonus;
    
                // Apply bonus for matches after a separator
                if (prevSeparator)
                    newScore += separator_bonus;
    
                // Apply bonus across camel case boundaries. Includes "clever" isLetter check.
                if (prevLower && strChar == strUpper && strLower != strUpper)
                    newScore += camel_bonus;
    
                // Update patter index IFF the next pattern letter was matched
                if (nextMatch)
                    ++patternIdx;
    
                // Update best letter in str which may be for a "next" letter or a "rematch"
                if (newScore >= bestLetterScore) {
    
                    // Apply penalty for now skipped letter
                    if (bestLetter != null)
                        score += unmatched_letter_penalty;
    
                    bestLetter = strChar;
                    bestLower = bestLetter.toLowerCase();
                    bestLetterIdx = strIdx;
                    bestLetterScore = newScore;
                }
    
                prevMatched = true;
            }
            else {
                // Append unmatch characters
                formattedStr += strChar;
    
                score += unmatched_letter_penalty;
                prevMatched = false;
            }
    
            // Includes "clever" isLetter check.
            prevLower = strChar == strLower && strLower != strUpper;
            prevSeparator = strChar == '_' || strChar == ' ';
    
            ++strIdx;
        }
    
        // Apply score for last match
        if (bestLetter) {
            score += bestLetterScore;
            matchedIndices.push(bestLetterIdx);
        }
    
        // Finish out formatted string after last pattern matched
        // Build formated string based on matched letters
        var formattedStr = "";
        var lastIdx = 0;
        for (var i = 0; i < matchedIndices.length; ++i) {
            var idx = matchedIndices[i];
            formattedStr += str.substr(lastIdx, idx - lastIdx) + "<b>" + str.charAt(idx) + "</b>";
            lastIdx = idx + 1;
        }
        formattedStr += str.substr(lastIdx, str.length - lastIdx);
    
        var matched = patternIdx == patternLength;
        return [matched, score, formattedStr];
    }
    

答案 3 :(得分:3)

albertein的回答与Trevor的版本不符,因为原始函数在字符基础上执行匹配而不是基于单词。这是一个更简单的匹配字符:

$("#element").select2({
  matcher: function(term, text, opts) {
    var pattern = term.replace(/\s+/g, '').split('').join('.*');
    text.match(new RegExp(pattern, 'i'))
  }
})

答案 4 :(得分:1)

var fuzzysearch = function (querystrings, values) {
    return !querystrings.some(function (q) {
        return !values.some(function (v) {
            return v.toLocaleLowerCase().indexOf(q) !== -1;
        });
    });
}

在书籍收藏中搜索标题和作者的示例 http://jsfiddle.net/runjep/r887etnh/2/

对于对搜索结果进行排名的9kb替代方案:http://kiro.me/projects/fuse.html

您可能需要为“某些”功能https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

添加填充

var books = [{
    id: 1,
    title: 'The Great Gatsby',
    author: 'F. Scott Fitzgerald'
}, {
    id: 2,
    title: 'The DaVinci Code',
    author: 'Dan Brown'
}, {
    id: 3,
    title: 'Angels & Demons',
    author: 'Dan Brown'
}];
search = function () {
    var queryarray = document.getElementById('inp').value.trim().toLowerCase().split(' ');
    var res = books.filter(function (b) {
        return fs(queryarray, [b.title, b.author]);
    });
    document.getElementById('res').innerHTML = res.map(function (b) {
        return b.title + ' <i> ' + b.author + '</i>';
    }).join('<br/> ');
}
fs = function (qs, vals) {
    return !qs.some(function (q) {
        return !vals.some(function (v) {
            return v.toLocaleLowerCase().indexOf(q) !== -1;
        });
    });
}
<input id="inp" />
<button id="but" onclick="search()">Search</button>
<div id="res"></div>

答案 5 :(得分:0)

function fuzzyMe(term, query) {
  var score = 0;
  var termLength = term.length;
  var queryLength = query.length;
  var highlighting = '';
  var ti = 0;
  // -1 would not work as this would break the calculations of bonus
  // points for subsequent character matches. Something like
  // Number.MIN_VALUE would be more appropriate, but unfortunately
  // Number.MIN_VALUE + 1 equals 1...
  var previousMatchingCharacter = -2;
  for (var qi = 0; qi < queryLength && ti < termLength; qi++) {
    var qc = query.charAt(qi);
    var lowerQc = qc.toLowerCase();

    for (; ti < termLength; ti++) {
      var tc = term.charAt(ti);

      if (lowerQc === tc.toLowerCase()) {
        score++;

        if ((previousMatchingCharacter + 1) === ti) {
          score += 2;
        }

        highlighting += "<em>" + tc + "</em>";
        previousMatchingCharacter = ti;
        ti++;
        break;
      } else {
        highlighting += tc;
      }
    }
  }

  highlighting += term.substring(ti, term.length);

  return {
    score: score,
    term: term,
    query: query,
    highlightedTerm: highlighting
  };
}

以上照顾了模糊性。然后你可以迭代你所有选择的2个元素

$("#element").select2({
  matcher: function(term, text, opt) {
    return fuzzyMe(term, text).highlightedTerm;
  }
});

模糊代码的信用 - :https://github.com/bripkens/fuzzy.js

答案 6 :(得分:0)

新的select2有困难,这里有什么用?

 $("#foo").select2({
   matcher: matcher
 });

function matcher(params, data) {
  // return all opts if seachbox is empty
  if(!params.term) {
    return data;
  } else if(data) {
    var term = params.term.toUpperCase();
    var option = data.text.toUpperCase();
    var j = -1; // remembers position of last found character

    // consider each search character one at a time
    for (var i = 0; i < term.length; i++) {
      var l = term[i];
      if (l == ' ') continue;     // ignore spaces

      j = option.indexOf(l, j+1);     // search for character & update position
      if (j == -1) return false;  // if it's not found, exclude this item
    }
    return data; // return option
  }
}