リストアイテムから文字列を検索・ハイライト化「Looking For」
当ページのリンクには広告が含まれています。
スポンサーリンク
リストアイテムから文字列を検索・ハイライト化するプラグイン「Looking For」を紹介します。
jQueryプラグイン「Looking For」
このプラグインを使えば、フォームに入力した文字列を指定したリストアイテム（li）から絞り込みます。
さらに入力した文字列とマッチした文字列をハイライト表示することもできるので、利便性抜群のプラグインです。
スポンサーリンク
それではデモページのフォームにいろいろ入力してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Looking For のデモでーす。">
<title>Looking For - jQueryプラグイン</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.lookingfor.js"></script>
<script>
jQuery(function($) {
$.get('countries.csv', function(data) {
var _list = $('ul'),
_count = $('#count');
data = data.split('\n');
_list
.html('<li>' + data.join('</li><li>') + '</li>')
.lookingfor({
input: $('input'),
items: 'li',
highlight: true
});
_count.text(data.length);
});
});
hljs.initHighlightingOnLoad();
</script>
</head>
<body>
<h1>Looking For のデモ。</h1>
<input type="search" class="form-control" placeholder="検索！" autofocus="autofocus" />
<ul></ul>
</body>
</html>
スポンサーリンク