无法将表单值附加到 Jquery 自动完成源答案

【问题标题】：Can't attach a form value to Jquery autocomplete source无法将表单值附加到 Jquery 自动完成源
【发布时间】：2011-07-30 09:31:06
【问题描述】：

我花了很多时间，为 Jquery-Autocomplete-Source 添加额外的参数。但我无法完成它。

我正在尝试做的事情：我有一个带有 jQuery 数据源的自动完成表单。如果您从自动完成中选择某些内容，它将被插入到表格中（文本和带有 id 的隐藏字段）并启动函数lesen（工作正常）。函数lesen 读取每个具有“类”nutzerid（隐藏字段）的元素的值到一个数组并将其放入一个输入字段 - 输入字段是所有 id 的收集器（有效！）。但！自动完成应读取此字段的值并将其作为参数发送到我的 JSON 源。但事实并非如此。 Firebug 控制台显示一个空参数。即使警报能够显示该值。我真的不知道，我做错了什么。

我还尝试用变量替换输入字段（所有 id 的收集器）。但同样的问题也发生在这里。我可以提醒 var 的值。但是尝试将其附加到源会产生一个空参数。我还尝试通过 param、extraparams 选项将值赋予自动完成功能。没有成功。我认为加入阵列存在问题。也许是lesen 中的步骤，其中所有 id 都被推送到一个数组中，并且该数组被填充到表单中。但我不知道如何解决这个问题。

我为什么要这样做？我希望 JSON 源 PHP 在其 MySQL 查询中排除已选择的 id。以前的请求中选择的内容不应再显示为自动完成。所以我必须发布之前添加到请求页面的内容。这是我选择的方式（可能不是最干净的）。想象一个购物车。如果产品已附加到购物车，则不应在以后的请求中显示该产品。当然，我对新方法持开放态度。

<input type="text" id="ausschluss" />

$(document).ready(
function() {



//this functions reads every hidden field (form the added items) an puts the array as string to a hidden field      
function lesen(){
            var itemsarray = [];
          $(".nutzerid").each(function () {
           var items = $(this).attr('value');
           itemsarray.push(items);
          });
          $( "#ausschluss" ).val(itemsarray);

          };


    //this function attaches the selection (from the autocomplete) to a table it creates text, a hidden field with the user id and a button
        function log( name, id ) {
            $("<tr> <td>"  + name + "<input class='Entf' type='button' value ='Entfernen' />" + "<input type='hidden' class='nutzerid' name='hiddenField' value='" + id + "' /></td></tr>").appendTo("#log");
            $( "#log" ).attr( "scrollTop", 0 );
            lesen();

                   }
//this is the autocompletepart
        $( "#REMOTE" ).autocomplete({
            source: "json.php?aus=" + $( "#ausschluss" ).val(), //this is not working. the firebug console shows an empty param (.php?aus=&term=blabla
            minLength: 2,
            select: function( event, ui ) {
                log(ui.item.value,ui.item.id);          
                alert($( "#ausschluss" ).val());  //this works! after selecting an item from the autocomplete it shows me the value of the field "ausschluss", like it should be appended to the source
                }

        });

//this one captures the click of a button. identified by the class and kills the <tr> <td> and all elemtns in it        
$('.Entf').live('click',function(event){
     $(this).parent().parent().remove();
     lesen();
   });




});

【问题讨论】：

标签： jquery autocomplete

【解决方案1】：

jQueryUI 自动完成控件 - 很像对话框 - 是使用 $('#myElement').autocomplete() 初始化程序创建的。

您的问题正在发生，因为您正在使用尚未填充的 $('#ausschluss').val() 初始化自动完成一次。自动完成不会再次引用该值 - 它被有效地缓存。您需要重构代码以将 ausschluss 作为变量传递给函数，然后让该函数调用自动完成功能，或者（可能更好），尝试像这样动态设置源代码：

$( "#REMOTE" ).autocomplete( "option", "source", 'json.php?aus=' + $('#ausschluss').val() );

只要你的 ausschluss 值发生变化，你就会调用它。

【讨论】：

【解决方案2】：

我知道现在已经很晚了，但我刚刚遇到了这个问题并想出了这个解决方案。

如果您想根据表单中另一个字段中的值生成自动完成结果集，您可以这样做：

$(document).ready(function(){
    $('#alpha').change(function(){setLibraryAutoComplete();});
    setLibraryAutoComplete();
});
function setLibraryAutoComplete(){
    $('#beta').autocomplete({source: "TypeAhead?param1=ABC&param2="+$("#alpha").val()});
}

这会使用字段中的值设置页面加载时自动完成，但也会导致自动完成调用在源字段值更改时更新。

【讨论】：