Question

我有一个div元素，其CSS中的display属性设置为none。我想要使用这个隐藏div的子元素来使用jQuery UI的自动完成功能。当我转动＆＃39;显示：无＆＃39;关闭，它工作正常。当我使用.show（）方法显示div时，自动完成功能不起作用。这是div：

<div class="FloatingDiv" id="SNOMEDValueSelector" title="Select SNOMED Concepts" style="width:550px;">
    <div style="padding:0px 3px 0px 3px;">
        <div class="container" style="height:50px">
            <div id="ConceptTypeDiv" class="left-column">
                <label for="ConceptType" style="width:100%;">Concept Type:</label>
                @Html.DropDownList("ConceptType", null, new { @class = "select", style = "width:95%;" })
            </div>
            <div id="DiagnosisStatusDiv" class="right-column-two-thirds" style="display:none;">
                <label for="DiagnosisStatus" style="width:100%;">Diagnosis Status:</label>
                @Html.DropDownList("DiagnosisStatus", null, new { @class = "select", style = "width:95%;" })
            </div>
            <div id="OrderTestCheckBox" class="right-column-two-thirds" style="display:none;">
                <div style="float:left;width:10%">&nbsp;</div>
                <div style="float:left;width:25%">
                    <label for="chkOrder" style="font-size:.9em;">Order Test:</label>
                    <input type="checkbox" name="chkOrder" value="Order Test" id="chkOrder"/>
                </div>
                <div style="float:left; width:63%">
                    <label for="TestResults" style="width: 90%; font-size: .9em">Test Results:</label>
                    @Html.TextBox("TestResults", null, new { @class = "input-box", style = "width:90%;" })
                </div>
            </div>
        </div>
        <div class="container" style="width: 100%; height: 40px">
            <div class="left-column" style="width: 41%">
                <label for="SearchTerm" style="width: 90%; font-size: .9em">Search Term:</label>
                @Html.TextBox("SearchTerm", null, new { @class = "input-box", style = "width:90%;" })
            </div>
            <div class="center-column" style="width: 15%">
                <label>&nbsp;</label>
                <input type="button" value="Populate" class="button-small" id="Populate" onclick="SearchDiscreteValues();" />
            </div>
            <div id="ValueTextBox" class="right-column" style="width: 42%;height:40px">
                <div style="container">
                    <div style="float: left; width: 30%;">
                        <label>&nbsp;</label>
                        <input type="button" value="Clear" class="button-small" id="Clear" onclick="ClearContents();" />
                    </div>
                    <div style="float: left; width: 63%;">
                        <label for="Value" style="width: 95%;">Modifier Value:</label>
                        @Html.DropDownList("Value", null, new { @class = "input-box", style = "width:90%;", multiple = "multiple"})
                    </div>
                    <div style="float: left; width: 6%;">
                        <label>&nbsp;</label>
                        <a id="ValueLink" href="javascript:displayValueWindow();" style="width: 100%">...</a>
                    </div>
                </div>
            </div>
        </div>

以下是自动填充代码：

$(document).ready(function () {
    $("#SearchTerm").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetConceptsAutocomplete","ClinicalData")',
                type: "GET",
                dataType: "json",
                data: { 
                    SearchString: $('#SearchTerm').val(),
                    ConceptType: $('#ConceptType').val()
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { 
                            label: item.Description, 
                            value: item.Description, 
                            id: item.ID 
                        };
                    }));
                },

            });
        },
        minLength: 3,
        select: function (event, ui) {

            $("#SearchTerm").val(ui.item.label);

        }
    });
});

我在浏览器中查看了该页面的Source，该元素正在渲染。

我错过了什么？这可以不做，还是我必须在显示后将自动完成绑定到元素？我该怎么做呢？

Answer 1

显然，当您显示和隐藏div时，jQuery会丢失某种绑定。解决方案是向要使用自动完成的元素添加一个类，然后将自动完成绑定到document.keyup.autocomplete事件。

这是使用新类生成文本框的剃刀语法：

@Html.TextBox("SearchTerm", null, new { @class = "input-box AutoComplete", style = "width:90%;" })

这里是keyup.autocomplete的绑定：

 $(document).on("keyup.autocomplete", '.AutoComplete', function () {
    $(this).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetConceptsAutocomplete","ClinicalData")',
                type: "GET",
                dataType: "json",
                data: { 
                    SearchString: SearchTerm,
                    ConceptType: ConceptID
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { 
                            label: item.Description, 
                            value: item.Description, 
                            id: item.ID 
                        };
                    }));
                },

            });
        },
        minLength: 3,
        select: function (event, ui) {
            $target.val(ui.item.label);
        }
    });
});

自动填充不会在div的子元素上触发显示：无显示

1 个答案: