原型多个自动完成

时间:2011-05-23 14:57:25

标签: ajax autocomplete prototypejs

我正在尝试建立一个管理界面,可以选择不同类型的模型,然后将它们保存为新对象。

Event.observe($('modelSearch'),'focus',function(){
    new Ajax.Autocompleter( 'modelSearch', 'autoCompleteModel', 'xxx',
    {
        paramName: "q",
        indicator: "makeWaitPic",
        parameters: "previusId=" + $( 'previusModelId' ).getValue(),
        afterUpdateElement: function( text, li )
            {
                if( li.id != '' )
                    $( 'modelId' ).value = <AjaxReturnValue>;
                else
                    $( 'modelSearch' ).value = '';
            }
    } );
});

我遇到的问题是,当我有一个自动完成依赖于另一个自动完成时,我遇到了问题。第一个自动完成让您选择一个模型并将选定的模型ID存储在隐藏的输入字段中。第二个自动完成使用此值,以便它知道它应该查找哪个数据库表。

问题1 :如果我在dom上创建两个自动完成:加载它们将在设置之前读取输入值。因此第二次自动完成将无效。

问题2 :如果我在观察时创建自动完成:焦点,他们每次都会读取新鲜的值,但每次重置自动完成字段时,也会创建自己的多个实例。

我可以以任何方式使自动完成每次使用时都读取输入值并且仅初始化一次吗?或者我可以以任何方式销毁在使用它之后保存自动完成的对象并且下次创建一个新对象?

如何解决这个问题,任何想法?

1 个答案:

答案 0 :(得分:1)

我通过每次第一个值更改时创建一个新的输入元素来解决它,从而删除旧输入和与之关联的自动完成对象。然后创建一个绑定到新输入字段的新自动完成。

if( $( 'previousModelId' ).getValue() != prevId ){
    $('modelSearch').remove();
    $('wrapperId').insert({'top': '<input type="text" id="modelSearch" name="modelSearch" size="30" title="search model here." />'});
    initModelSearch();
    prevId = $( 'previousModelId' ).getValue();
}