【问题标题】:jquery autocomplete with dialog updating value带有对话框更新值的jquery自动完成
【发布时间】:2013-06-19 00:56:57
【问题描述】:

我有一个在对话框中打开的表单。其中一个字段具有自动完成功能。所有字段都已构建,服务器值存储在其中以预填写表单。

var mydiv = jQuery("#editform");
var $myform = jQuery("<form id='EditForm' method='post' action='index.php?option=com_component&task=edit'></form>");
...
var $mylabel10 = jQuery("<label for='EditSelect'>A label</label>");
var $myinput9 = jQuery("<input id='EditSelect' name='EditSelect' type='text' />");
var $mylabel9 = jQuery("<label for='EditSelect2'>Another label</label>");
var $myinput8 = jQuery("<input id='EditSelect2' name='add_path' value='" +path + "' />"); //path is a value passed in from the server

$myform.append(... $mylabel10, $myinput9, $mylabel9, $myinput8);
mydiv.append($myform);

    //autocomplete code - order is important to have autocomplete go outside dialog
    var available = [
             { label : 'foo', value : 'bar' },
             { label : 'xyz', value : 'abc' },
             ...
         ];
    jQuery( "#EditSelect", mydiv ).autocomplete({
        source: available,
        focus : function(){ return false; }
    })
    .on( 'autocompleteselect', function( e, ui ){
        var t = jQuery(this),
          details = jQuery('#EditSelect2'),
          label = ( e.type == 'autocompleteresponse' ? ui.content[0].label :  ui.item.label ),
          value = ( e.type == 'autocompleteresponse' ? ui.content[0].value : ui.item.value );

      t.val( label );
      details.val( value ); //doesn't update the form here?

      return false;
    });

     // get reference to autocomplete element
    var autoComplete = jQuery("#EditSelect", mydiv).autocomplete("widget");

    var dialogOpts = {
            modal: true,
            autoOpen: true,
            resizable: false,
            width: 525,
            height: 'auto',
            title: 'Edit settings'
        };

    mydiv.dialog(dialogOpts);  
    autoComplete.insertAfter(mydiv.parent());

In this edit dialog is an autocomplete that when selected it should update the other input field (#EditSelect2).当前#EditSelect2 具有来自服务器的值(在变量path 中)。

当从自动完成中选择一个新值时,我希望表单会因为以下代码而更新:details.val( value );。现在自动完成工作正常,但在自动完成中选择新选项后,来自服务器 (path) 的值没有得到更新。

希望这是有道理的。

【问题讨论】:

    标签: jquery jquery-autocomplete jquery-dialog


    【解决方案1】:

    您的 myinput8 语句中有一个小语法错误:

    $myinput8 = jQuery("<input id='EditSelect2' name='add_path' value='" +path + " />");
    

    应该是:

    $myinput8 = jQuery("<input id='EditSelect2' name='add_path' value='" +path + "' />");
    

    注意末尾多余的单引号。

    【讨论】:

    • 感谢您查看,但当我删除与问题无关的其他垃圾时,这只是问题的剪切/粘贴错误。
    • @Tom:但在此修复后,这个小提琴:jsfiddle.net/3FJuC 似乎工作(使用 FF21)。
    • 感谢您坚持使用它并向我展示它确实有效。我有重复的 ID...叹息。
    • 没问题,很高兴你发现了问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-01-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-02-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多