Jquery Ui multiple autocomplete form not getting values in the input


I have created a jquery ui autocomplete not returning values in input field in the form. The autocomplete dropdown is showing but the value is not getting in the input but the label is showing perfectly. I need the value added to the input value area in the input field. Here is the HTML what i was trying.

Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/>
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="wrapper" style="margin-top:150px;">
<form method="get" action="index.html">
<input id="myAutocomplete" type="text" name="my-autocomplete" value="" />
<input type="submit" />
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
<script src="../src/jquery.autocomplete.multiselect.js"></script> 
<script src="js/main.js"></script>
</body>
</html>

main.js

$(function(){
    var availableTags = [{ label: "Amargeti ", value: "amargeti" }, { label: "Anavargos ", value: "anavargos" }, { label: "Aphrodite Hills ", value: "aphrodite-hills" }, { label: "Ayia Marinouda ", value: "ayia-marinouda" }, { label: "Chloraka ", value: "chloraka" }, { label: "Choletria ", value: "choletria" }, { label: "City Center ", value: "city-center" }, { label: "Coral Bay ", value: "coral-bay" }, { label: "Cyprus ", value: "cyprus" }, { label: "Emba ", value: "emba" }, { label: "Geroskipou ", value: "geroskipou" }, { label: "Kallepia ", value: "kallepia" }, { label: "Kalogiri ", value: "kalogiri" }, { label: "Kathikas ", value: "kathikas" }, { label: "Kato Paphos ", value: "kato-paphos" }, { label: "Kissonerga ", value: "kissonerga" }, { label: "Koili ", value: "koili" }, { label: "Koloni ", value: "koloni" }, { label: "Konia ", value: "konia" }, { label: "Kouklia ", value: "kouklia" }, { label: "Larnaca ", value: "larnaca" }, { label: "Letymbou ", value: "letymbou" }, { label: "Limassol ", value: "limassol" }, { label: "Mandria ", value: "mandria" }, { label: "Mesa Chorio ", value: "mesa-chorio" }, { label: "Mesogi ", value: "mesogi" }, { label: "Nicosia ", value: "nicosia" }, { label: "Paphos ", value: "paphos" }, { label: "Peyia ", value: "peyia" }, { label: "Polemi ", value: "polemi" }, { label: "Polis ", value: "polis" }, { label: "Sea Caves ", value: "sea-caves" }, { label: "Secret Valley ", value: "secret-valley" }, { label: "Simou ", value: "simou" }, { label: "St George ", value: "st-george" }, { label: "Stroumbi ", value: "stroumbi" }, { label: "Tala ", value: "tala" }, { label: "Timi ", value: "timi" }, { label: "Tremithousa ", value: "tremithousa" }, { label: "Tsada ", value: "tsada" }, { label: "Universal Area ", value: "universal-area" },  ];

    $('#myAutocomplete').autocomplete({
        source: availableTags,
        minLength: 1,
        multiselect: true,


    select: function( event, ui ) {
          var terms = split( this.value );
          terms.pop();
          terms.push( ui.item.value );
          terms.push( "" );
          this.value = terms.join( ", " );
          $('#myAutocomplete').val(""+ $(this).val());
          return false;
        }


    });
})

jquery.autocomplete.multiselect.js

$.widget("ui.autocomplete", $.ui.autocomplete, {
    options : $.extend({}, this.options, {
        multiselect: false
    }),
    _create: function(){
        this._super();

        var self = this,
            o = self.options;

        if (o.multiselect) {
            console.log('multiselect true');

            self.selectedItems = {};           
            self.multiselect = $("<div></div>")
                .addClass("ui-autocomplete-multiselect ui-state-default ui-widget")
                .css("width", self.element.width())
                .insertBefore(self.element)
                .append(self.element)
                .bind("click.autocomplete", function(){
                    self.element.focus();
                });

            var fontSize = parseInt(self.element.css("fontSize"), 10);
            function autoSize(e){
                // Hackish autosizing
                var $this = $(this);
                $this.width(1).width(this.scrollWidth+fontSize-1);
            };

            var kc = $.ui.keyCode;
            self.element.bind({
                "keydown.autocomplete": function(e){
                    if ((this.value === "") && (e.keyCode == kc.BACKSPACE)) {
                        var prev = self.element.prev();
                        delete self.selectedItems[prev.text()];
                        prev.remove();
                    }
                },
                // TODO: Implement outline of container
                "focus.autocomplete blur.autocomplete": function(){
                    self.multiselect.toggleClass("ui-state-active");
                },
                "keypress.autocomplete change.autocomplete focus.autocomplete blur.autocomplete": autoSize
            }).trigger("change");

            // TODO: There's a better way?
            o.select = o.select || function(e, ui) {
                $("<div></div>")
                    .addClass("ui-autocomplete-multiselect-item")
                    .text(ui.item.label)
                    .append(
                        $("<span></span>")
                            .addClass("ui-icon ui-icon-close")
                            .click(function(){
                                var item = $(this).parent();
                                delete self.selectedItems[item.text()];
                                item.remove();
                            })
                    )
                    .insertBefore(self.element);

                self.selectedItems[ui.item.label] = ui.item;
                self._value("");
                return false;
            }

            /*self.options.open = function(e, ui) {
                var pos = self.multiselect.position();
                pos.top += self.multiselect.height();
                self.menu.element.position(pos);
            }*/
        }

        return this;
    }
});
- - Source

Answers

answered 4 day ago Twisty #1

Here is my testing:

$(function() {
  $.widget("ui.autocomplete", $.ui.autocomplete, {
    options: $.extend({}, this.options, {
      multiselect: false
    }),
    _create: function() {
      this._super();

      var self = this,
        o = self.options;

      if (o.multiselect) {
        console.log('multiselect true');

        self.selectedItems = {};
        self.multiselect = $("<div></div>")
          .addClass("ui-autocomplete-multiselect ui-state-default ui-widget")
          .css("width", self.element.width())
          .insertBefore(self.element)
          .append(self.element)
          .bind("click.autocomplete", function() {
            self.element.focus();
          });

        var fontSize = parseInt(self.element.css("fontSize"), 10);

        function autoSize(e) {
          // Hackish autosizing
          var $this = $(this);
          $this.width(1).width(this.scrollWidth + fontSize - 1);
        };

        var kc = $.ui.keyCode;
        self.element.bind({
          "keydown.autocomplete": function(e) {
            if ((this.value === "") && (e.keyCode == kc.BACKSPACE)) {
              var prev = self.element.prev();
              delete self.selectedItems[prev.text()];
              prev.remove();
            }
          },
          // TODO: Implement outline of container
          "focus.autocomplete blur.autocomplete": function() {
            self.multiselect.toggleClass("ui-state-active");
          },
          "keypress.autocomplete change.autocomplete focus.autocomplete blur.autocomplete": autoSize
        }).trigger("change");

        // TODO: There's a better way?
        o.select = o.select || function(e, ui) {
          $("<div></div>")
            .addClass("ui-autocomplete-multiselect-item")
            .text(ui.item.label)
            .append(
              $("<span></span>")
              .addClass("ui-icon ui-icon-close")
              .click(function() {
                var item = $(this).parent();
                delete self.selectedItems[item.text()];
                item.remove();
              })
            )
            .insertBefore(self.element);

          self.selectedItems[ui.item.label] = ui.item;
          self._value("");
          return false;
        }

        /*self.options.open = function(e, ui) {
            var pos = self.multiselect.position();
            pos.top += self.multiselect.height();
            self.menu.element.position(pos);
        }*/
      }

      return this;
    }
  });

  var availableTags = [{
    label: "Amargeti ",
    value: "amargeti"
  }, {
    label: "Anavargos ",
    value: "anavargos"
  }, {
    label: "Aphrodite Hills ",
    value: "aphrodite-hills"
  }, {
    label: "Ayia Marinouda ",
    value: "ayia-marinouda"
  }, {
    label: "Chloraka ",
    value: "chloraka"
  }, {
    label: "Choletria ",
    value: "choletria"
  }, {
    label: "City Center ",
    value: "city-center"
  }, {
    label: "Coral Bay ",
    value: "coral-bay"
  }, {
    label: "Cyprus ",
    value: "cyprus"
  }, {
    label: "Emba ",
    value: "emba"
  }, {
    label: "Geroskipou ",
    value: "geroskipou"
  }, {
    label: "Kallepia ",
    value: "kallepia"
  }, {
    label: "Kalogiri ",
    value: "kalogiri"
  }, {
    label: "Kathikas ",
    value: "kathikas"
  }, {
    label: "Kato Paphos ",
    value: "kato-paphos"
  }, {
    label: "Kissonerga ",
    value: "kissonerga"
  }, {
    label: "Koili ",
    value: "koili"
  }, {
    label: "Koloni ",
    value: "koloni"
  }, {
    label: "Konia ",
    value: "konia"
  }, {
    label: "Kouklia ",
    value: "kouklia"
  }, {
    label: "Larnaca ",
    value: "larnaca"
  }, {
    label: "Letymbou ",
    value: "letymbou"
  }, {
    label: "Limassol ",
    value: "limassol"
  }, {
    label: "Mandria ",
    value: "mandria"
  }, {
    label: "Mesa Chorio ",
    value: "mesa-chorio"
  }, {
    label: "Mesogi ",
    value: "mesogi"
  }, {
    label: "Nicosia ",
    value: "nicosia"
  }, {
    label: "Paphos ",
    value: "paphos"
  }, {
    label: "Peyia ",
    value: "peyia"
  }, {
    label: "Polemi ",
    value: "polemi"
  }, {
    label: "Polis ",
    value: "polis"
  }, {
    label: "Sea Caves ",
    value: "sea-caves"
  }, {
    label: "Secret Valley ",
    value: "secret-valley"
  }, {
    label: "Simou ",
    value: "simou"
  }, {
    label: "St George ",
    value: "st-george"
  }, {
    label: "Stroumbi ",
    value: "stroumbi"
  }, {
    label: "Tala ",
    value: "tala"
  }, {
    label: "Timi ",
    value: "timi"
  }, {
    label: "Tremithousa ",
    value: "tremithousa"
  }, {
    label: "Tsada ",
    value: "tsada"
  }, {
    label: "Universal Area ",
    value: "universal-area"
  }, ];

  function split(str) {
    return str.split(/,\s*/);
  }

  $('#myAutocomplete').autocomplete({
    source: availableTags,
    minLength: 1,
    multiselect: true,


    select: function(event, ui) {
      var terms = split(this.value);
      terms.pop();
      terms.push(ui.item.value);
      terms.push("");
      this.value = terms.join(", ");
      $('#myAutocomplete').val("" + $(this).val());
      return false;
    }


  });
})
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<div class="wrapper" style="margin-top:150px;">
  <form method="get" action="index.html">
    <input id="myAutocomplete" type="text" name="my-autocomplete" value="" />
    <input type="submit" />
  </form>
</div>

This works to enter the value and not the label. It does not work beyond the first entry since you are missing a number of additional elements to the Multi Select example: http://jqueryui.com/autocomplete/#multiple

Hope that helps.

comments powered by Disqus