多个自动完成不起作用答案

【问题标题】：Multiple Autocomplete Not working多个自动完成不起作用
【发布时间】：2012-02-17 00:28:19
【问题描述】：

$(function() {
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }
    $( "#names" ).autocomplete({
        source: function(request, response) {
            $.ajax({ url: "<?php echo site_url('update/suggestions'); ?>",
            data: { term: extractLast( request.term )},
            dataType: "json",
            type: "POST",
            success: function(data){
                response(data);
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( "," );
                return false;
            }
        });
    },
    minLength: 2
    });
});

上面的代码替换了现有的选择，而不是将新的选择添加到现有的选择中。这是在 Codeigniter 中。单个自动完成工作正常。这不适用于多个输入字段，而是用于将多个值添加到单个输入字段。

【问题讨论】：

标签： jquery jquery-ui codeigniter autocomplete jquery-ui-autocomplete

【解决方案1】：

你的代码有几个问题：

您没有正确关闭$.ajax 函数和source 选项函数。
minLength: 2 也放错了位置。
由于之前的问题，您的右括号/括号过多。

例如你有：

    source: function(request, response) {
        $.ajax({ url: "<?php echo site_url('update/suggestions'); ?>",
        ...
        success: function(data){
            response(data);
        },
    // missing closings
    focus: function() {

应该是：

    source: function(request, response) {
        $.ajax({
            url: "<?php echo site_url('update/suggestions'); ?>",
            ...
            success: function(data) {
                response(data);
            }
        });   // closes $.ajax function
    },    // closes the 'source' function
    focus: function() {

用正确的语法检查这个 DEMO。它工作正常（我在 ajax 中添加了一个错误处理程序以显示一些静态结果）。

【讨论】：

这是因为我没有在错误处理程序（我的静态数据源）中过滤列表。我已经更新了小提琴，现在它可以正确过滤了。
你真是个救命恩人，感激不尽，为此奋斗了 10 天。

【解决方案2】：

对于多个自动完成，您如何提供 id "#names"？您是否为所有自动完成输入字段提供了相同的 ID。

尝试为所有自动完成输入字段提供一个通用类，然后像下面这样调用

 $( ".autoclass" ).autocomplete({

【讨论】：

这不是用于多个输入字段，而是用于将多个值添加到单个输入字段。