Bootstrap Snippet Autocomplete using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<br />
<div class="container">
    <label for="search">Procedure: </label>
    <input id="search">
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
.ui-autocomplete-category {
    font-weight: bold;
    padding: .1em .2em;
    margin: .4em 0 .1em;
    line-height: 1;
  }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
$( function() {
    $.widget( "custom.catcomplete", $.ui.autocomplete, {
      _create: function() {
        this._super();
        this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
      },
      _renderMenu: function( ul, items ) {
        var that = this,
          currentCategory = "";
        $.each( items, function( index, item ) {
          var li;
          if ( item.category != currentCategory ) {
            ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
            currentCategory = item.category;
          }
          li = that._renderItemData( ul, item );
          if ( item.category ) {
            li.attr( "aria-label", item.category + " : " + item.label );
          }
        });
      }
    });
    var data = [
      { label: "Ultrasound Knee Right", category: "Ultrasound" },
      { label: "Ultrasound Knee Left", category: "Ultrasound" },
      { label: "MRI Knee Right", category: "MRI" },
      { label: "MRI Knee Left", category: "MRI" },
      { label: "CT Knee Right", category: "CT" },
      { label: "CT Knee Left", category: "CT" },
      { label: "Ultrasound Forearm/Elbow Left", category: "Ultrasound" },
      { label: "Ultrasound Forearm/Elbow Right", category: "Ultrasound" },
      { label: "MRI Forearm/Elbow Left", category: "MRI" },
      { label: "MRI Forearm/Elbow Right", category: "MRI" },
      { label: "CT Forearm/Elbow Left", category: "CT" },
      { label: "CT Forearm/Elbow Right", category: "CT" }
    ];
 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Autocomplete"
Bootstrap 3.0.0 Snippet by paananen

Related: See More

Questions / Comments:

"Autocomplete" Bootstrap 3.0.0 Snippet by paananen

Related: See More

Questions / Comments:

"Autocomplete"
Bootstrap 3.0.0 Snippet by paananen