jQuery UI: Autocomplete に入力キーワードのハイライト機能を拡張する

概要:オートコンプリート(サジェスト)のオプションに highlight を追加して、trueの場合に入力キーワードのハイライト機能を拡張し、false(highlight オプションがない)の場合は既存動作。

デモ


JavaScript (jquery.ui.autocomplete.highlight.js)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
(function($) {
  'use strict';
  $(function() {
    $.widget('ui.autocomplete', $.ui.autocomplete, {
      options: {
        highlight: false
      },
      _init: function() {
        if (this.options.highlight === true) {
          this.options.highlight = '<span class="ui-state-highlight">$&</span>';
        }
      },
      _renderItem: function(ul, item) {
        return (typeof this.options.highlight !== 'string')
          ? this._super(ul, item)
          : $('<li>').html(
            String(item.label).replace(
              new RegExp('(' + $.ui.autocomplete.escapeRegex(this.term) + ')', 'gi'),
              this.options.highlight
            )
        ).appendTo(ul);
      }
    });
  });
})(jQuery);

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery ui autocomplete highlight</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  </head>
  <body>
    <div>
      <p>「Script」と入力して下さい。</p>
      <input id="keyword" type="search" style="width:200px" />
    </div>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="jquery.ui.autocomplete.highlight.js"></script>
    <script>
      (function($) {
        'use strict';
        $(function() {
          var availableTags = [
            'ECMAScript',
            'Java Script',
            'Action Script',
            'Apple Script',
            'LotusScript',
            'VBScript',
            'Windows Script Host'
          ];
          $('#keyword').autocomplete({
            source: availableTags,
            highlight: true
          });
        });
      })(jQuery);
    </script>
  </body>
</html>