首页 文章

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

提问于
浏览 次
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>

在我的文本字段中，我使用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>
javascript jquery twitter-typeahead

1 回答

  • 1

    由于您始终期望基于输入的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);
            }).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>

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

    回复于

相关问题