yura29,
Вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
/**
* fastLiveFilter jQuery plugin 1.0.3
*
* Copyright (c) 2011, Anthony Bush
* License: <http://www.opensource.org/licenses/bsd-license.php>
* Project Website: [url]http://anthonybush.com/projects/jquery_fast_live_filter/[/url]
**/
jQuery.fn.fastLiveFilter = function(list, options) {
// Options: input, list, timeout, callback
options = options || {};
list = jQuery(list);
var input = this;
var lastFilter = '';
var timeout = options.timeout || 0;
var callback = options.callback || function() {};
var keyTimeout;
// NOTE: because we cache lis & len here, users would need to re-init the plugin
// if they modify the list in the DOM later. This doesn't give us that much speed
// boost, so perhaps it's not worth putting it here.
var lis = list.children();
var len = lis.length;
var oldDisplay = len > 0 ? lis[0].style.display : "block";
callback(len); // do a one-time callback on initialization to make sure everything's in sync
input.change(function() {
// var startTime = new Date().getTime();
var filter = input.val().toLowerCase();
var matrix = "8-(928)-(123)-(32)-(12)",
i = 0,
val = filter.replace(/\D/g, '');
filter = matrix.replace(/\d/g, function (a) {
return val.charAt(i++) || "_"
})
filter = filter.replace(/_.*/g ,'')
var li, innerHTML, old;
var numShown = 0;
for (var i = 0; i < len; i++) {
li = lis[i];
innerHTML = !options.selector ?
(li.textContent || li.innerHTML || "") :
$(li).find(options.selector).text();
li.textContent = li.textContent.replace("<span style='background-color: #E66A57'>","");
li.textContent = li.textContent.replace("</span>","");
if (innerHTML.toLowerCase().indexOf(filter) >= 0) {
$(li).html(function(i,o) {
return o.replace(filter, "<span style='background-color: #E66A57'>" + filter + "</span>");
});
if (li.style.display == "none") {
li.style.display = oldDisplay;
}
numShown++;
} else {
if (li.style.display != "none") {
li.style.display = "none";
}
}
}
callback(numShown);
// var endTime = new Date().getTime();
// console.log('Search for ' + filter + ' took: ' + (endTime - startTime) + ' (' + numShown + ' results)');
return false;
}).keydown(function() {
clearTimeout(keyTimeout);
keyTimeout = setTimeout(function() {
if( input.val() === lastFilter ) return;
lastFilter = input.val();
input.change();
}, timeout);
});
return this; // maintain jQuery chainability
}
</script>
<script>
$(function ()
{
$('#search_input').fastLiveFilter('#search_list');
})
</script>
</head>
<body>
<input id="search_input" placeholder="Type to filter">
<ul id="search_list">
<li>8-(928)-(123)-(32)-(12)</li>
<li>8-(927)-(123)-(32)-(12)</li>
<li>8-(923)-(123)-(32)-(12)</li>
</ul>
</body>
</html>