在自动完成javascript后自动在文本框中设置值

时间:2015-07-15 16:04:37

标签: javascript c# asp.net visual-studio-2013

我的数据库中有4个相互连接的文本框,其值为:姓氏,团队,社团,国家。

我已经为所有值创建了自动完成方法;事实上,如果我尝试写一个名称/社会ecc,方法搜索数据库中是否存在值并推荐值。我已经实施的另一件事是,如果我选择一个姓氏和一个团队(或其他2个值),它会建议你的社会和国家,或者你没有选择与其他价值观相关的东西。

如何在不使用用户选择的情况下自动设置值(我需要做什么来设置automaticcaly查询结果的文本框值)?谢谢。 我使用的是Asp.net mvc和javascript。

编辑:这是代码。 HTML:

@{
    string autocompletePrefix = "address";
}
            <div class="form-group">
                @Html.CustomLabelFor(model => model.PlayerId, new { @class = "control-label col-md-2" })
                <div class="col-md-10" style="display:inline-flex;">
                    <div class="input-group">
                        @Html.TextBox("Player", null, null, new { @id = autocompletePrefix + "PlayerName", @class = "ui-autocomplete-input form-control" })
                        <span class="input-group-btn">
                            <button id="@autocompletePrefix-PlayerSearcher" class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-list" id="@autocompletePrefix-playerIconList"></span>
                            </button>
                        </span>
                    </div>
                    <div class="ui-autocomplete ui-front btn-group-vertical"></div>
                    @Html.HiddenFor(model => model.PlayerId, new { @id = autocompletePrefix + "PlayerId" })
                    @Html.ValidationMessageFor(model => model.PlayerId)
                </div>
            </div>


<script type="text/javascript">
        $(document).on('ready readyAgain', function () {
            address = AutocompleteTeamModule('@autocompletePrefix', '@Url.Action("GetHintsForPlayers", "Addresses", new { })', '@Url.Action("GetHintsForTeam", "Addresses", new { })', '@Url.Action("GetHintsForSocieties", "Addresses", new { })', '@Url.Action("GetHintsForCountry", "Addresses", new { })');
        initMultipleSelection();
    });

    </script>

使用Javascript:

function AutocompleteTeamModule( _prefixHtmlId, _hintsForPlayer,_hintsForTeam,_hintsForSociety,_hintsForCountry)
{
    init: function () {
    $("#" + myObj.prefixHtmlId + "-PlayerSearcher").click(function () {
                myObj.PlayerSearcherClick = true;
                $('#' + myObj.prefixHtmlId + 'PlayerName').autocomplete("option", "minLength", 0);
                var value = $("#" + myObj.prefixHtmlId + "PlayerId").val();
                if( value != "")
                    $('#' + myObj.prefixHtmlId + 'PlayerName').autocomplete("search", $("#" + myObj.prefixHtmlId + "PlayerId").val());
                else
                    $('#' + myObj.prefixHtmlId + 'CountryName').autocomplete("search", "");
                $('#' + myObj.prefixHtmlId + 'PlayerName').trigger("focus");
                $("#" + myObj.prefixHtmlId + "-PlayerLoader").toggleClass("hide", false);
                $("#" + myObj.prefixHtmlId + "-PlayerIconList").toggleClass("hide", true);
                $("#" + myObj.prefixHtmlId + "-PlayerCountry").toggleClass("hide", false);
                $('#' + myObj.prefixHtmlId + 'PlayerName').autocomplete("option", "minLength", 2);
            });

              $("#" + myObj.prefixHtmlId + "PlayerName").autocomplete({
                minLength: 2, autoFocus: true, source: function (term, resp) {
                    $.ajax({
                        type: "GET",
                        url: myObj.hintsPlayerUrl,
                        data: { "id": term.term + "-" + $("#" + myObj.prefixHtmlId + "PlayerId").val() },
                        success: function (data) {
                            $("#" + myObj.prefixHtmlId + "-PlayerLoader").toggleClass("hide", true);
                            $("#" + myObj.prefixHtmlId + "-PlayerIconList").toggleClass("hide", false);
                            myObj.PlayerNameData = data.slice();

                            resp(data, function (data) {
                                return data;
                            });
                        },
                        error: function (xhr, txt, err) {
                            iride_error_handler(xhr, txt, err);
                        }
                    })
                },
                select: function (e, data) {
                  var pa=$("#" + myObj.prefixHtmlId + "PlayerId").val();
                    $("#" + myObj.prefixHtmlId + "PlayerId").val(data.item.value);
                    $("#" + myObj.prefixHtmlId + "-PlayerLoader").toggleClass("hide", true);
                    $("#" + myObj.prefixHtmlId + "-PlayerIconList").toggleClass("hide", false);
                    pa = data.item.value;
                    e.preventDefault();

                    var teamisSet = $("#" + myObj.prefixHtmlId + "TeamId").val();
                    if (teamisSet == "")
                        $('#' + myObj.prefixHtmlId + 'TeamName').autocomplete("search", "-" + pa);
                    e.preventDefault();

                    var societyisSet = $("#" + myObj.prefixHtmlId + "SocietyId").val();
                    if (provinceisSet == "")
                        $('#' + myObj.prefixHtmlId + 'ProvinceName').autocomplete("search", "-" + pa);
                    e.preventDefault();

                    var countryisSet = $("#" + myObj.prefixHtmlId + "CountryId").val();
                    if(countryisSet == "")
                    $('#' + myObj.prefixHtmlId + 'CountryName').autocomplete("search", "-" + $("#" + myObj.prefixHtmlId + "CountryId").val());
                    e.preventDefault();
                },
                focus: function (event, ui) {
                    if (ui.item.value != " ") {
                        $(this).val(ui.item.label);
                    }
                    event.preventDefault();
                }
            });
}

2 个答案:

答案 0 :(得分:0)

您可以提供一些代码示例,或者更具体地说明您正在使用的组件。

也许你只能使用jQuery(javascript):

$('#textboxID').val('new value of textbox');

答案 1 :(得分:0)

阐述JQuery建议 -

我肯定希望看到一些代码,但基于我认为您的代码的样子,

如果您正在谈论根据其他选择器上的用户输入更改选择器的值,您可以在点击处理程序中使用switchif else。如果这是一个非常重要的数据流程,肯定会有更有效的方法来做到这一点,但如果它足够小就会像这样 -

    $('submitbutton').click(function() {
       if ($('firstselector').val() == 'certain value') {
          $('secondselector').val("associated value 1");
          $('thirdselector').val("associated value 2");
       } else if ($('firstselector').val() == 'another certain value') {
          // so on and so forth
       };
    });

一个开关,如果可用的选项太多 - 清理代码

    $('submitbutton').click(function() {
       switch ($('firstselector').val()) {
          case: 'certain value'
             $('secondselector').val("associated value 1");
             $('thirdselector').val("associated value 2");
             break; 
          case: 'another certain value'
             // so on and so forth
             break;
       };
    });