jqueryとmvc razorを使用したdelimitirの問題

Question

同じフィールドに値をほとんど追加できません。私は1つの値しか選択できません。,、;またはその他の区切り文字を入力した後、別の値を選択することはできません。私はそれがオートコンプリートと同様に動作するようにします。

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script> 
<link href="@Url.Content("~/Scripts/jquery.autocomplete.css")" rel="stylesheet" type="text/css" /> 

はありませんがあります：私はこれらのスクリプトを使用してい

public ActionResult TagName(string q) 
{ 
    var tags = new List<TagModel> 
    { 
     new TagModel {Name = "aaaa", NumberOfUse = "0"}, 
     new TagModel {Name = "mkoh", NumberOfUse = "1"}, 
     new TagModel {Name = "asdf", NumberOfUse = "2"}, 
     new TagModel {Name = "zxcv", NumberOfUse = "3"}, 
     new TagModel {Name = "qwer", NumberOfUse = "4"}, 
     new TagModel {Name = "tyui", NumberOfUse = "5"}, 
     new TagModel {Name = "asdf[", NumberOfUse = "6"}, 
     new TagModel {Name = "mnbv", NumberOfUse = "7"} 
    }; 

    var tagNames = (from p in tags where p.Name.Contains(q) select p.Name).Distinct().Take(3); 

    string content = string.Join<string>("\n", tagNames); 
    return Content(content); 
} 

：

<div class="editor-field"> 
    @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#Name").autocomplete('@Url.Action("TagName", "Tag")', { 
     minChars: 1, 
     delimiter: /(,|;)\s*/, 
     onSelect: function(value, data){ 
      alert('You selected: ' + value + ', ' + data); 
     } 
    }); 
}); 
</script> 

それは私のコントローラからのデータを使用しています。

私はバインドjQueryを使ってテキストボックスを持っています火かき棒のエラー。私のコードで何が間違っていますか？

Answer 1

私は、より最近のjQuery UI autocompleteプラグインを使用して、あなたをお勧めします。 jQuery ui 1.8は、新しいASP.NET MVC 3プロジェクトの一部として配布されています。

は限り、あなたのコードが関係しているとして、このようにそれを修正しよう：

var url = '@Url.Action("TagName", "Tag")'; 
$('#Name').autocomplete(url, { 
    minChars: 1, 
    multiple: true, 
    formatResult: function(row) { 
     return row[0].replace(/(<.+?>)/gi, ''); 
    } 
}).result(function (event, data, formatted) { 
    alert(!data ? "No match!" : "Selected: " + formatted); 
}); 

Answer 2

のjQuery UIに含まれているオートコンプリート機能は、スタンドアロンのjQueryプラグインとは異なるコードフォーマットを有します。これに関する詳細はjQuery UIのWebサイトの下のリンクにあります。ここで

http://jqueryui.com/demos/autocomplete/

は

$("#Name").autocomplete({ 
     source: url, 
     minLength: 1, 
     select: function(event, ui) { 
      log(ui.item ? 
       "Selected: " + ui.item.value + " aka " + ui.item.id : 
       "Nothing selected, input was " + this.value); 
     } 
    }); 

Answer 3

が放火犯でこの種の問題を経験したのjQuery UIオートコンプリート機能の簡単な例です。私はあなたのコードが期待通りに動作していない、と放火魔はそれはあなたのウェブをチェックしてみましょうあなたにすべてのエラーメッセージが表示されていない場合、それはエラーメッセージ

を含むまでFirebugのコンソール を信頼しないことをお勧め

クロールのページで、コンソールタブ内の例外がどこで正確に処理されていないかを確認してください。を使用している場合はが特に役に立ちます。

Answer 4

あなたが使用しているオートコンプリートのバージョンは、jqueryはこれをサポートしていません。詳細はhttp://jqueryui.com/demos/autocomplete/#multipleを参照してください。

これはdiv要素（コンテナ）を作成します

.autocomplete({ 
     minLength: 0, 
     source: function(request, response) { 
      // delegate back to autocomplete, but extract the last term 
      response($.ui.autocomplete.filter(
       availableTags, extractLast(request.term))); 
     }, 
     focus: function() { 
      // prevent value inserted on focus 
      return false; 
     }, 
     select: function(event, ui) { 
      var terms = split(this.value); 
      // remove the current input 
      terms.pop(); 
      // add the selected item 
      terms.push(ui.item.value); 
      // add placeholder to get the comma-and-space at the end 
      terms.push(""); 
      this.value = terms.join(", "); 
      return false; 
     } 
    }); 

Answer 5

1. マルチ選択を設定するためのページからsnippitです。

2. テキスト領域のように見えるようにスタイルを設定します。

3. div内にテキストフィールドを挿入します。それを左に浮かべてください。境界線をクリアします（テキストフィールドにカーソルを置くと、divは実際にテキスト領域のように見えます）。）

4. このフィールドにオートコンプリートをバインドします。 [オン]を選択し

5. 、spanまたはdivまたはこの `TheLabelのようなものを作成して、DIV（コンテナ）の内側にそれを付加。それを付加

   1.Before、jqueryの.data()

   2.Itを使用してspanでオブジェクトを保存するには、優れたユーザインタフェースを行います。

6. これを行う場合は、前の選択肢を削除するオプションを付けることもできます。