jQuery自动完成组合框添加新项目？

Posted 2023-05-08

【中文标题】jQuery自动完成组合框添加新项目？

【英文标题】：jQuery Autocomplete Combobox add new Item?

【发布时间】：2021-11-16 09:23:17

【问题描述】：

我目前想用“jQuery UI Autocomplete - Combobox”创建以下解决方案： 我从可以选择的数据库中加载条目。如果某个值不存在，则应让用户添加其值。

我目前的依据是：https://jqueryui.com/autocomplete/#combobox

现在我已经适应了“_removeIfInvalid: function(event, ui) ...”

我删除了“//删除无效值”部分，并将其替换为以下行：

$('#name1').append('<option value='+ value + ' selected>'+ value + '</option>');

这也是从原理上起作用的。只有值“#name1”仍然是一个固定值，我目前无法以某种方式获得这个名称。使用“this.input.name”和类似的调用它不起作用。搜索并没有引导我找到解决方案。

为了我的目的，我有什么机会修改“//删除无效值”部分？

提前非常感谢。页面DE

_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;
        
        
        
        
        $('#name1').append('<option value='+ value + ' selected>'+ value + '</option>');
        
        
        
    ,

【问题讨论】：

如果您查看示例，您可以看到原始元素 this.element 被隐藏并且 this.input 已创建，请参见第 45 行。这个新输入没有 ID 属性。建议使用this.element.find("select")作为目标。

【参考方案1】：

感谢您的建议。这对我帮助很大。

问题的解决方法：

$('#'+this.element.attr("id")).append('<option value='+ value + ' selected>'+ value + '</option>');

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。