3

私はjQuery Autocompleteウィジェットを使用しており、この質問に触発されてselect 後にメニューが閉じないようにするために、次のコードを思いつきました。

$(#input_field).autocomplete({
  select   : function(event, ui) {

    // I also tried to run 'ui.item.data( "item.autocomplete" );' and it happens
    // the same thing (keep reading for more information).
    ui.item.option.selected = false;

  },
  ...
});

それは機能します：選択後にメニューが閉じられません。ただし、(Firebug コンソールで) 次のエラーが表示されます。

TypeError: ui.item.option is undefined

使用してoption.selected = falseも取得できますTypeError: option is undefinedが、期待どおりに機能します。

どうすれば解決できますか？

4

1 に答える 1

1

残念ながら、現在の jQuery UI には、この問題を処理するためのオプション/メソッドはありません。使用しようとしている方法は、古いバージョンの jQuery UI 用です。現在のバージョンui.itemには、アクセスしようとしているプロパティがありません。内部しかない{"label":"Java","value":"java"}ため、エラーが発生します。

したがって、それを機能させるには、ある種のハックが必要になります。jQuery UI ソース コードを調べたところ、これを行う最も簡単で信頼できる方法は、closeカスタム メソッドを使用せずにパブリック メソッドをオーバーライドすることであることがわかりました。オートコンプリートを閉じる必要がない場合は、非常に簡単です。

$("#input_field").data('autocomplete').close = function() {};

ただし、項目がマウスで選択されたときにのみ閉じないようにしたい場合は、さらに複雑になります。

// custom close method
(function(){
    var instance = $("#input_field").data('autocomplete');
    var origClose = instance.close, mouseFlag;

    // capture mouse events
    instance.menu.element.on('mousedown', function() {
        mouseFlag = true;
    });
    instance.close = function(e) {
        if(!mouseFlag) {
            // call original method if drop isn't closed by mouse
            origClose.apply(this, arguments);
        } else {
            // clean flag in setTimeout to avoid async events
            setTimeout(function(){
                mouseFlag = false;    
            },1);
        }
    }
}());​

ワーキングJSFiddle

于 2012-11-24T18:37:15.080 に答える