stackoom
  简体   繁体   中英

Jquery Ui multiple autocomplete form not getting values in the input

 原文  2018-12-06 18:27:42  8   1    javascript/ jquery/ jquery-ui/ jquery-ui-autocomplete

Question

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

1 answers

solution1
 0  2018-12-08 01:52:12

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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Can jQuery UI Autocomplete use values from multiple input fields Jquery UI Autocomplete with Multiple Values and Multiple Labels jQuery UI autocomplete multiple input controls with multiple JSON sources Getting the ID from a jQuery Autocomplete UI Box into a form on a JSP Material UI autocomplete with redux-form values getting destroyed jQuery UI autocomplete values not getting selected after selection from mouse using jquery-ui autocomplete with multiple input fields jQuery UI autocomplete and multiple values in IE6,7,8 Jquery-ui-autocomplete for multiple values with comma separated items not working jQuery autocomplete multiple values
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM