バインドID Value to Hidden Input先読み経由の入力

Question

私の作成フォームには2つの入力フィールドがあります。 1つは隠され、もう1つはテキストフィールドです。

@Html.HiddenFor(model => model.StateId) 

<div class="form-group"> 
    @Html.Label("State", htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
     @Html.Editor("StateName", new { htmlAttributes = new { @id="StateName", @class = "form-control" } }) 
     @Html.ValidationMessageFor(model => model.StateId, "", new { @class = "text-danger" }) 
    </div> 
</div> 

テキストフィールドには、先読みを使用して、ユーザーがテキストボックスに入力しているものに一致するオプションを選択できるようにしています。私のスクリプトは、ユーザーが実際にオプションを選択したときに機能しますが、ユーザーが単語全体を入力するだけでは機能しません。テキストフィールドは米国内の州のためのフィールドです。したがって、ユーザーがtを入力すると、その文字を含む状態がユーザーが選択できるように表示され、ユーザーが希望の状態を選択すると、その状態のidが非表示の入力フィールドにバインドされます。

でも、もし私がTexasを入力したら、キーボードから手を離してオプションを選択するのではなく、ただ単語を入力するだけですみます。しかし、私はそれを行う場合..オプションを選択しないでください.. id値は隠された入力フィールドにバインドされていません。

自動完了から選択しないと、ユーザーが望む状態のidをどうやってバインドするのですか。ここで

は私のスクリプトです：

<script> 
    $(document).ready(function() { 
     /* For Auto Complete */ 

     var states = new Bloodhound({ 
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('state'), 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 
      remote: { 
       url: '/api/statesapi?query=%QUERY', 
       wildcard: '%QUERY' 
      } 
     }); 

     $('#StateName').typeahead({ 
       highlight: true 
      }, 
      { 
       name: 'states', 
       display: 'state', 
       source: states, 
       limit: 10 
      }).bind('typeahead:select', 
      function(ev, suggestion) { 
       $("#StateId").val(suggestion.id); 
      }); 

     /* ************************** */ 
    }); 
</script> 

Answer 1

あなたは常に入力に基づいてIDを期待しているので、あなたが最初の提案を選択するだけで、自動をaswellかもしれません。

<script> 
    $(document).ready(function() { 
     /* For Auto Complete */ 

     var states = new Bloodhound({ 
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('state'), 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 
      remote: { 
       url: '/api/statesapi?query=%QUERY', 
       wildcard: '%QUERY' 
      } 
     }); 

     $('#StateName').typeahead({ 
       highlight: true 
      }, 
      { 
       name: 'states', 
       display: 'state', 
       source: states, 
       limit: 10 
      }).bind('typeahead:select', 
      function(ev, suggestion) { 
       $("#StateId").val(suggestion.id); 
      }).bind("change", function(e) { 
       var first_suggestion = $(this).parent().find(".tt-suggestion:first-child") 
       if(first_suggestion.length!=0) 
        first_suggestion.trigger('click'); 
       //else 
        // handle invalid input here 
      }); 

     /* ************************** */ 
    }); 
</script> 

はIncaseの