jquery autocomplete for rails application

Question

私はレールアプリケーションでオートコンプリートを使用する必要があります。コンボボックスをソースとして使用します。 jqueryオートコンプリートとコンボボックスを使用しました。

しかし、私は余分な機能が必要です。 "Apple"と入力し、オートコンプリート検索では利用できないとすると、 "Create New Apple"という名前のリストに新しいアイテムが表示されます。これを選択すると、JavaScriptイベントがトリガーされます。それを追加するダイアログを開くことができます。

また、レンダリング後にオートコンプリートを更新することもできます。新しいレコードを追加する場合は、リストにも挿入することができます。

あなたから良いものを得ることを望みます。

Answer 1

私はこのコードで私のシナリオを完全に記入しました。 jqueryサイトのコードを変更し、変更イベントをリファクタリングしました。

auto_obj.change = function(event, ui) { 
     if (!ui.item) { 
     var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), 
        valid = false; 
     select.children("option").each(function() { 
     if ($(this).text().match(matcher)) { 
      this.selected = valid = true; 
       return false; 
     } 
     }); 
     if (!valid) { 
      // Trigger the event for value not found 
      $(select).trigger('autocompletenotfound', $(this).val()); 

      // remove invalid value, as it didn't match anything 
      $(this).val(""); 
      select.val(""); 
      input.data("autocomplete").term = ""; 
      return false; 
     } 
    } 
} 

とソース機能で

auto_obj.source = function(request, response) { 
       var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
       var match = false; 

       response(select.children("option").map(function(i, value) { 
        var text = $(this).text(); 
        if (this.value && (!request.term || matcher.test(text))) { 
         match = true; 
         return { 
          label: text.replace(
            new RegExp(
              "(?![^&;]+;)(?!<[^<>]*)(" + 
                $.ui.autocomplete.escapeRegex(request.term) + 
                ")(?![^<>]*>)(?![^&;]+;)", "gi" 
              ), "<strong>$1</strong>"), 
          value: text, 
          option: this 
         }; 
        } 
        if (!match && i == select.children("option").size() -1 && self.options.allow_new) { 
         return { 
          label:'Create new <strong>'+ input.val() +'</strong>', 
          value: input.val(), 
          option: null 
         }; 
        } 
       })); 
      }; 

これは私の要件を満たしました。希望は他の人のために完全に助けになるでしょう。

Answer 2

オートコンプリートクエリのレスポンスは、サーバー側またはクライアント側から取得していますか？

応答がサーバー側からのものである場合、新しい「apple」の追加は自動的に更新されます。新しいダイアログをトリガするjavascriptイベントについては、Jqueryの "change"オブザーバイベントを使用できます。このような

何か：

 

$("#autocomplete-list").live("change",function(){ 
    if($(this).val() == "Create New Apple"){ 
     //add function to create dialogue 
    } 
}); 
 

今すぐあなたのオートコンプリートレスポンスは、クライアント側からのものである場合は、ダイアログの作成をトリガするために、上記のコールバックを使用することができます。

しかし、新しい作成された「リンゴ」を含むように自動補完応答を動的に更新するには、すべてのリンゴを保持するjavascript変数を置き換える必要があります。

これは、変数が配置されているDOM要素を置き換える新しい「apple」を作成するたびに、railsアプリケーションを呼び出すことで実行できます。そうすると、作成された新しい「リンゴ」がオートコンプリートリストに含まれます。

希望がこれに当てはまる