https://diagnosticomedico.com/js/combobox.js

1$( function() {
2    $.widget( "custom.combobox", {
3      _create: function() {
4        this.wrapper = $( "<span>" )
5          .addClass( "custom-combobox" )
6          .insertAfter( this.element );
7 
8        this.element.hide();
9        this._createAutocomplete();
10        this._createShowAllButton();
11      },
12 
13      _createAutocomplete: function() {
14        var selected = this.element.children( ":selected" ),
15          value = selected.val() ? selected.text() : "";
16 
17        this.input = $( "<input>" )
18          .appendTo( this.wrapper )
19          .val( value )
20          .attr( "title", "" )
21          .attr( "placeholder", "Buscar estudios" )
22          .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
23          .autocomplete({
24            delay: 0,
25            minLength: 0,
26            source: $.proxy( this, "_source" )
27          })
28          .tooltip({
29            classes: {
30              "ui-tooltip": "ui-state-highlight"
31            }
32          });
33 
34        this._on( this.input, {
35          autocompleteselect: function( event, ui ) {
36            ui.item.option.selected = true;
37            this._trigger( "select", event, {
38              item: ui.item.option
39            });
40          },
41 
42          autocompletechange: "_removeIfInvalid"
43        });
44
45      },
46 
47      _createShowAllButton: function() {
48        var input = this.input,
49          wasOpen = false;
50 
51        $( "<a>" )
52          .attr( "tabIndex", -1 )
53          .attr( "title", "Ver todos los estudios" )
54          .tooltip()
55          .appendTo( this.wrapper )
56          .button({
57            icons: {
58              primary: "ui-icon-triangle-1-s"
59            },
60            text: false
61          })
62          .removeClass( "ui-corner-all" )
63          .addClass( "custom-combobox-toggle ui-corner-right" )
64          .on( "mousedown", function() {
65            wasOpen = input.autocomplete( "widget" ).is( ":visible" );
66          })
67          .on( "click", function() {
68            console.log("seleccione uno1111111")
69            input.trigger( "focus" );
70 
71            // Close if already visible
72            if ( wasOpen ) {
73              return;
74            }
75 
76            // Pass empty string as value to search for, displaying all results
77            input.autocomplete( "search", "" );
78          });
79      },
80 
81      _source: function( request, response ) {
82        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
83        response( this.element.children( "option" ).map(function() {
84          var text = $( this ).text();
85          if ( this.value && ( !request.term || matcher.test(text) ) )
86            return {
87              label: text,
88              value: text,
89              option: this
90            };
91        }) );
92      },
93 
94      _removeIfInvalid: function( event, ui ) {
95 
96        // Selected an item, nothing to do
97        if ( ui.item ) {
98
99          return;
100        }
101 
102        // Search for a match (case-insensitive)
103        var value = this.input.val(),
104          valueLowerCase = value.toLowerCase(),
105          valid = false;
106        this.element.children( "option" ).each(function() {
107          if ( $( this ).text().toLowerCase() === valueLowerCase ) {
108            this.selected = valid = true;
109            return false;
110          }
111        });
112 
113        // Found a match, nothing to do
114        if ( valid ) {
115          console.log("seleccione uno");
116          return;
117        }
118 
119        // Remove invalid value
120        this.input
121          .val( "" )
122          .attr( "title", " No se encontro el estudio" )
123          .tooltip( "open" );
124        this.element.val( "" );
125        this._delay(function() {
126          this.input.tooltip( "close" ).attr( "title", "" );
127        }, 2500 );
128        this.input.autocomplete( "instance" ).term = "";
129      },
130 
131      _destroy: function() {
132        this.wrapper.remove();
133        this.element.show();
134      }
135    });
136 
137    $( "#combobox" ).combobox();
138    $( "#toggle" ).on( "click", function() {
139
140      $( "#combobox" ).toggle();
141    });

142  } );