堆栈内存溢出
  繁体   English   中英

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

[英]Jquery Ui multiple autocomplete form not getting values in the input

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

问题描述

我创建了一个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;
    }
});

1 个解决方案

解决方案1
 0  2018-12-08 01:52:12

这是我的测试： 

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

希望能有所帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery UI Autocomplete是否可以使用多个输入字段中的值 具有多个值和多个标签的Jquery UI自动完成 jQuery UI使用多个JSON源自动完成多个输入控件 从 jQuery 自动完成 UI 框中获取 ID 到 JSP 上的表单中 材料 UI 自动完成，redux-form 值被破坏 从鼠标中选择后，jQuery UI自动完成值未被选中 使用带有多个输入字段的 jquery-ui 自动完成功能 jQuery UI自动完成功能和IE6、7、8中的多个值 jQuery-ui-autocomplete用于多个值且逗号分隔的项不起作用 jQuery自动完成多个值
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM