在 Syncfusion 中创建自动完成框答案

【问题标题】：Create autocomplete box in Syncfusion在 Syncfusion 中创建自动完成框
【发布时间】：2017-02-02 13:07:09
【问题描述】：

编辑模式为inlineFormTemplate时如何创建自动完成框

例如：

<script id="template" type="text/template">
<input type="text" name="test" value="{{:test}}"/>
//here i need autocomplete textbox like this
<ej-autocomplete id="search1" filter-type="Contains" highlight-search="true" show-rounded-corner="true" enable-auto-fill="true"
                     enable-distinct="true" show-popup-button="true" watermark-text="Country name" items-count="20" min-character="2"
                     width="150" popup-width="500px" popup-height="250px"
                     template="<div width='5%'>${CountryName} ${CountryId}</div>">
        <e-autocomplete-fields key="CountryId" text="CountryName" />
        <e-datamanager adaptor="UrlAdaptor" url="/country/SelectCountry"></e-datamanager>
    </ej-autocomplete>
</script>

【问题讨论】：

标签： syncfusion

【解决方案1】：

我们想通知您，在 Asp.Net Core 中，最初已呈现控件。使用渲染模板概念时，不会创建控件。为了解决这个问题，我们通过从客户端呈现自动完成控件来满足您的要求。请在网格中找到示例代码，以便在编辑时使用网格列中的自动完成。

代码：

<ej-grid id="Edittemplate" allow-paging="true">
        <e-datamanager url="//mvc.syncfusion.com/Services/Northwnd.svc/Orders/?$top=45" offline="true"></e-datamanager>
        <e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true" edit-mode="Normal" />
        <e-toolbar-settings show-toolbar="true" toolbar-items='new List<string>() { "add", "edit", "delete", "update", "cancel", "search" }' />
        <e-columns>
            <e-column field="OrderID" is-primary-key="true" header-text="Order ID" text-align="Right" width="70"></e-column>
            <e-column field="CustomerID" header-text="Customer ID" width="80">
                <e-edit-template create="create" read="read" write="write"></e-edit-template>
            </e-column>
            <e-column field="EmployeeID" header-text="Employee ID" text-align="Left" width="75"></e-column>
            <e-column field="Freight" header-text="Freight" text-align="Right" format="{0:C2}" width="75"></e-column>
            <e-column field="OrderDate" header-text="Order Date" text-align="Right" width="80" format="{0:MM/dd/yyyy}"></e-column>
            <e-column field="ShipCity" header-text="Ship City" width="110"></e-column>
        </e-columns>
    </ej-grid>

<script type="text/javascript">
function create() {
    return $("<input>");
}

function write(args) {
    obj = $('#Edittemplate').ejGrid('instance');
    args.element.ejAutocomplete({
        width: "100%", dataSource: obj.model.dataSource,
        query: ej.Query().from("Suppliers").select("CustomerID"),
        filterType: "contains",
        multiColumnSettings: {
            stringFormat: "{0}  ({2}) ({1})",
            enable: true,
            showHeader: true,
            columns: [{
                field: "CustomerID",
                headerText: "CustomerID",
            },
            {
                field: "OrderID",
                headerText: "OrderID"
            },
            {
                field: "EmployeeID",
                headerText: "EmployeeID"
            },
            {
                field: "ShipCity",
                headerText: "ShipCity"
            }
            ]
        }, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : ""
    });
}

function read(args) {
    args.ejAutocomplete('suggestionList').css('display', 'none');
    return args.ejAutocomplete("getValue");
}
$("#Edittemplate").keyup(function (e) {
    if (e.keyCode == 40 && $(e.target).hasClass("e-autocomplete")) {
        var autocomp = $("#EdittemplateCustomerID").ejAutocomplete("instance")
        if (autocomp.getValue() != "" && autocomp.getActiveText() != "No suggestions")
            $(e.target).val(autocomp.getActiveText());
    }
});

【讨论】：