通过Typeahead将Id值绑定到隐藏输入

时间:2017-08-23 16:16:30

标签: javascript jquery twitter-typeahead

在我的创建表单上,我有两个输入字段。一个是隐藏的,另一个是文本字段。

@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>

在我的文本字段中,我使用typeahead来允许用户选择与他们在文本框中输入内容相匹配的选项。我的脚本适用于用户实际上选择一个选项的情况..但如果用户只输入整个单词,它就不起作用。文本字段适用于美国境内的州。因此,如果用户键入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>

1 个答案:

答案 0 :(得分:1)

由于您始终期望基于输入的ID,您可能只需自动选择第一个建议。

'Copy values
  Set rStartCell = ActiveSheet.Range("A1") 'Specify the top-left corner cell of the data you wish to copy
  Set rTable_1 = ActiveSheet.Range(rStartCell, ActiveSheet.Range("Z" & rStartCell.End(xlDown).Row)) 'Change the Z column to the last column of the data you wish to copy. You can automate this by using something like Range(A1).end(xltoright).columns.count formula to grab the number of columns.
  Debug.Print "rTable_1: " & rTable_1.Address & " -> " & rTable_1.Rows.Count & " x " & rTable_1.Columns.Count 'good to test exactly what you're copying

  'Paste Values
  Set rStartCell = Outputs.Range("A1") 'Change A1 to the cell of where you want to paste on the Outputs worksheet in your original workbook.
  Set rTable_2 = Outputs.Range(rStartCell, rStartCell.Offset(rTable_1.Rows.Count - 1, rTable_1.Columns.Count - 1))
  Debug.Print "rTable_2: " & rTable_2.Address & " -> " & rTable_2.Rows.Count & " x " & rTable_2.Columns.Count
  rTable_2.Value = rTable_1.Value
  rTable_1.Copy
  rTable_2.PasteSpecial Paste:=xlPasteFormats 'to copy/paste those formats you need

  'Copy Worksheet and open it in a new workbook
  ThisWorkbook.Sheets("NAME OF OUTPUTS SHEET").Copy 'Using ThisWorkbook to point to the workbook holding this code.
  ActiveSheet.Name = "FCW"

如果没有显示任何建议,也无法获取输入的ID,因此您可以重置输入或显示警告......