2012-02-27 24 views
3

私はjQuery Autocompleteを使用していますが、編集可能にする必要があります。つまり、値がリストにない場合は、入力した値を取得する必要があります。上記のリンクの例を使用すると、ユーザーは選択肢C#を見られず、その言語を入力します。デフォルトの動作で見つかったのは、値がリストに見つからない場合、ユーザーの応答が消去されるということです。jQueryコンボボックス/オートコンプリート、編集可能

Iは、次のコードを追加しました:クリアされるの応答を防止するために

options: { 
    allowUserDefined: false 
}, 

var self = this, 
    **options = this.options,** 

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

を。そして、これらのいくつかの変更が機能します。しかし、C#はリストにないので、返される選択肢はありません。

入力フィールドに入力された内容をコードに返すにはどうすればよいですか?特にchangeイベントでコードをデバッグしている間、input.val()には入力されたテキストが含まれており、それが必要です。私はこの値にアクセスする方法を理解できません。

ありがとうございます。 (私は私が思いついたものよりも優れた厳格なオプションが好き)、私はの値を取得することができます

(function ($) { 
    $.widget("ui.combobox", { 
     options: { 
      allowUserDefined: false 
     }, 
     _create: function() { 
      if (this.options.allowUserDefined === null) { 
       this.options.allowUserDefined = false; 
      } 

      var self = this, 
        options = this.options, 
        select = this.element.hide(), 
        selected = select.children(":selected"), 
        value = selected.val() ? selected.text() : ""; 
      var input = this.input = $("<input>") 
        .insertAfter(select) 
        .val(value) 
        .autocomplete({ 
         delay: 0, 
         minLength: 0, 
         source: function (request, response) { 
          var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
          response(select.children("option").map(function() { 
           var text = $(this).text(); 
           if (this.value && (!request.term || matcher.test(text))) 
            return { 
             label: text.replace(
              new RegExp(
               "(?![^&;]+;)(?!<[^<>]*)(" + 
               $.ui.autocomplete.escapeRegex(request.term) + 
               ")(?![^<>]*>)(?![^&;]+;)", "gi" 
              ), "<strong>$1</strong>"), 
             value: text, 
             option: this 
            }; 
          })); 
         }, 
         select: function (event, ui) { 
          ui.item.option.selected = true; 
          self._trigger("selected", event, { 
           item: ui.item.option 
          }); 
         }, 
         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 && !options.allowUserDefined) { 
            // remove invalid value, as it didn't match anything 
            $(this).val(""); 
            select.val(""); 
            input.data("autocomplete").term = ""; 
            return false; 
           } 
          } 
         } 
        }) 
        .addClass("ui-widget ui-widget-content ui-corner-left"); 

      input.data("autocomplete")._renderItem = function (ul, item) { 
       return $("<li></li>") 
         .data("item.autocomplete", item) 
         .append("<a>" + item.label + "</a>") 
         .appendTo(ul); 
      }; 

      this.button = $("<button type='button'>&nbsp;</button>") 
        .attr("tabIndex", -1) 
        .attr("title", "Show All Items") 
        .insertAfter(input) 
        .button({ 
         icons: { 
          primary: "ui-icon-triangle-1-s" 
         }, 
         text: false 
        }) 
        .removeClass("ui-corner-all") 
        .addClass("ui-corner-right ui-button-icon") 
        .click(function() { 
         // close if already visible 
         if (input.autocomplete("widget").is(":visible")) { 
          input.autocomplete("close"); 
          return; 
         } 

         // work around a bug (likely same cause as #5265) 
         $(this).blur(); 

         // pass empty string as value to search for, displaying all results 
         input.autocomplete("search", ""); 
         input.focus(); 
        }); 
     }, 

     destroy: function() { 
      this.input.remove(); 
      this.button.remove(); 
      this.element.show(); 
      $.Widget.prototype.destroy.call(this); 
     } 
    }); 
})(jQuery); 

更新

Darkajaxのコードを使用する:ここで

は私の完全なJSファイルです

var valu = $("#combobox").parent().children()[1].value; 
+0

グッド私は少なくとも少し貢献することができてうれしいです! – DarkAjax

答えて

5

jQuery UIのオートコンプリートコンボボックスを使用すると、自分自身でコンボボックスを宣言することができますこのようにDGET:

それは有効な値などの他のオプションを受け入れなるだろう、とあなただけを使用する必要があります
(function($) { 
    $.widget("ui.combobox", { 
     // default options 
     options: { 
      strict: false 
     }, 
     _create: function() { 
      var self = this, 
       select = this.element.hide(), 
       selected = select.children(":selected"), 
       value = selected.val() ? selected.text() : "", 
       strict = this.options.strict; 

      var input = this.input = $("<input>") 
       .insertAfter(select) 
       .val(value) 
       .autocomplete({ 
        delay: 0, 
        minLength: 0, 
        source: function(request, response) { 
         var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
         response(select.children("option").map(function() { 
          var text = $(this).text(); 
          if (this.value && (!request.term || matcher.test(text))) 
           return { 
            label: text.replace(
             new RegExp(
              "(?![^&;]+;)(?!<[^<>]*)(" + 
              $.ui.autocomplete.escapeRegex(request.term) + 
              ")(?![^<>]*>)(?![^&;]+;)", "gi" 
             ), "<strong>$1</strong>"), 
            value: text, 
            option: this 
           }; 
         })); 
        }, 
        select: function(event, ui) { 
         ui.item.option.selected = true; 
         self._trigger("selected", event, { 
          item: ui.item.option 
         }); 
        }, 
        autocomplete : function(value) { 
         this.element.val(value); 
         this.input.val(value); 
        }, 
        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.value.match(matcher)) { 
            this.selected = valid = true; 
            return false; 
           } 
          }); 
          if (!valid) { 
           // if strict is true, then unmatched values are not allowed 
           if (strict) { 
            // remove invalid value, as it didn't match anything 
            $(this).val(""); 
            select.val(""); 
           } 
           return false; 
          } 
         } 
        } 
       }) 
       .addClass("ui-widget ui-widget-content ui-corner-left"); 

      input.data("autocomplete")._renderItem = function(ul, item) { 
       return $("<li></li>") 
        .data("item.autocomplete", item) 
        .append("<a>" + item.label + "</a>") 
        .appendTo(ul); 
      }; 

      this.button = $("<button type=\"button\" class=combo_button>&nbsp;</button>") 
       .attr("tabIndex", -1) 
       .attr("title", "Show All Items") 
       .insertAfter(input) 
       .button({ 
        icons: { 
         primary: "ui-icon-triangle-1-s" 
        }, 
        text: false 
       }) 
       .removeClass("ui-corner-all") 
       .addClass("ui-corner-right ui-button-icon") 
       .click(function() { 
        // close if already visible 
        if (input.autocomplete("widget").is(":visible")) { 
         input.autocomplete("close"); 
         return; 
        } 

        // pass empty string as value to search for, displaying all results 
        input.autocomplete("search", ""); 
        input.focus(); 
       }); 
     } 
    }); 
})(jQuery); 

$("#combobox").combobox({ 
    strict: true 
}); 

を、それがデフォルトとして動作させるために念のためにあなたがそれを必要とします。あなたがrequest.termにアクセスすることができます

source: function(request, response) 
{ 

+0

応答darkajaxに感謝します。私はまだ値を入力することができません。リスト内の最初の項目を返すように見えます。私は方法がある必要があることを知っている:) – DrZ

+0

上記の私の更新を参照してください。 – DrZ

0

は=何を入力しました。 darkajaxからクリーナー液、および次のコード行を使用して

0

は:

var valu = $("#combobox").parent().children()[1].value; 

私は、コンボボックスの値を取得することができました。

0

私はこれは誰を助けるかどうか見当もつかないが、入力に名前を与えることで、値が提出されました....(私はもちろん、無効なエントリを削除したコードを削除)

var input = this.input = $("<input name='somehthing'>") 
関連する問題