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

Question

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

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

在我的文本字段中，我使用预输入来允许用户 select 一个与他们在文本框中输入的内容相匹配的选项。我的脚本适用于用户实际上 select 一个选项的情况。但如果用户只是输入整个单词，它就不起作用。文本字段适用于美国境内的州。因此，如果用户输入 t.. 那么包含该字母的状态将显示给用户 select，并且一旦用户 select 找到他们想要的状态，id 的状态将绑定到隐藏的输入字段。

但为了我自己的缘故，我知道如果我要输入 Texas.. 对我来说，只输入单词会更快，而不是把手从键盘上拿开 select 选项。但是，如果我这样做......而不是 select 选项...... id 值未绑定到隐藏的输入字段。

如果用户不select自动完成，我如何仍然绑定用户想要的状态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，因此您也可以自动 select 第一个建议。

<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，因此您可以重置输入或显示警告...

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

Bind Id Value to Hidden Input via Typeahead

javascript

jquery

twitter-typeahead