Question

我创建了一个jQuery UI自动完成功能，未在表单的输入字段中返回值。显示自动完成下拉列表，但输入中未输入值，但标签显示完美。我需要将值添加到输入字段中的输入值区域。这是我正在尝试的HTML。

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;
    }
});

Answer 1

这是我的测试

$(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>

这可以输入value，而不是label。由于您在“多重选择”示例中缺少许多其他元素，因此它不能超出第一个条目：http://jqueryui.com/autocomplete/#multiple

希望有帮助。

jQuery Ui多个自动完成表单未在输入中获取值

1 个答案: