LoginSignup
0

More than 5 years have passed since last update.

jquery ui 入力できるコンボボックス

Posted at

<!doctype html>

jQuery UI Autocomplete - Combobox

.custom-combobox {

position: relative;

display: inline-block;

}

.custom-combobox-toggle {

position: absolute;

top: 0;

bottom: 0;

margin-left: -1px;

padding: 0;

}

.custom-combobox-input {

margin: 0;

padding: 5px 10px;

}

$( function() {

$.widget( "custom.combobox", {

  _create: function() {

    this.wrapper = $( "<span>" )

      .addClass( "custom-combobox" )

      .insertAfter( this.element );



    this.element.hide();

    this._createAutocomplete();

    this._createShowAllButton();

  },



  _createAutocomplete: function() {

    var selected = this.element.children( ":selected" ),

      value = selected.val() ? selected.text() : "";



    this.input = $( "<input>" )

      .appendTo( this.wrapper )

      .val( value )

      .attr( "title", "" )

      .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )

      .autocomplete({

        delay: 0,

        minLength: 0,

        source: $.proxy( this, "_source" )

      })

      .tooltip({

        classes: {

          "ui-tooltip": "ui-state-highlight"

        }

      });



    this._on( this.input, {

      autocompleteselect: function( event, ui ) {

        ui.item.option.selected = true;

        this._trigger( "select", event, {

          item: ui.item.option

        });

      },



      autocompletechange: "_removeIfInvalid"

    });

  },



  _createShowAllButton: function() {

    var input = this.input,

      wasOpen = false;



    $( "<a>" )

      .attr( "tabIndex", -1 )

      .attr( "title", "Show All Items" )

      .tooltip()

      .appendTo( this.wrapper )

      .button({

        icons: {

          primary: "ui-icon-triangle-1-s"

        },

        text: false

      })

      .removeClass( "ui-corner-all" )

      .addClass( "custom-combobox-toggle ui-corner-right" )

      .on( "mousedown", function() {

        wasOpen = input.autocomplete( "widget" ).is( ":visible" );

      })

      .on( "click", function() {

        input.trigger( "focus" );



        // Close if already visible

        if ( wasOpen ) {

          return;

        }



        // Pass empty string as value to search for, displaying all results

        input.autocomplete( "search", "" );

      });

  },



  _source: function( request, response ) {

    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );

    response( this.element.children( "option" ).map(function() {

      var text = $( this ).text();

      if ( this.value && ( !request.term || matcher.test(text) ) )

        return {

          label: text,

          value: text,

          option: this

        };

    }) );

  },



  _removeIfInvalid: function( event, ui ) {



    // Selected an item, nothing to do

    if ( ui.item ) {

      return;

    }



    // Search for a match (case-insensitive)

    var value = this.input.val(),

      valueLowerCase = value.toLowerCase(),

      valid = false;

    this.element.children( "option" ).each(function() {

      if ( $( this ).text().toLowerCase() === valueLowerCase ) {

        this.selected = valid = true;

        return false;

      }

    });



    // Found a match, nothing to do

    if ( valid ) {

      return;

    }



    // Remove invalid value

    this.input

      .val( "" )

      .attr( "title", value + " didn't match any item" )

      .tooltip( "open" );

    this.element.val( "" );

    this._delay(function() {

      this.input.tooltip( "close" ).attr( "title", "" );

    }, 2500 );

    this.input.autocomplete( "instance" ).term = "";

  },



  _destroy: function() {

    this.wrapper.remove();

    this.element.show();

  }

});



$( "#combobox" ).combobox();

$( "#toggle" ).on( "click", function() {

  $( "#combobox" ).toggle();

});

} );

Your preferred programming language: Select one... ActionScript AppleScript Asp BASIC C C++ Clojure COBOL ColdFusion Erlang Fortran Groovy Haskell Java JavaScript Lisp Perl PHP Python Ruby Scala Scheme

Show underlying select

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0