生成自动完成功能 Angular 和 Jquery

Posted 2023-05-09

【中文标题】生成自动完成功能 Angular 和 Jquery

【英文标题】：Generating an auto-complete function Angular and Jquery

【发布时间】：2018-08-17 18:48:55

【问题描述】：

我目前正在开发一个使用 :

的网络应用程序

JQuery

AngularJS

剑道框架

特别是，我需要在输入文本上使用剑道来实现自动完成功能。

所以，我的第一个选择是使用 jquery 选择输入文本，然后像这样对其应用自动完成：

$(".autoComplete").kendoAutoComplete(
            dataSource: data, 
            filter: "startswith",
            placeholder: "Select country...",
            separator: ","
        );

自动完成类应用于文本类型的输入元素。

然而，这个解决方案似乎不适用，因为输入文本是动态生成的角度模态：

script type="text/ng-template" id="dialogAddCompany.tpl.html">
<div class="modal-header no-header"></div>
<div class="modal-body">
    <div class="row"><div class="col-sm-12 col-md-12"><div class="modal-caption-description-title"><label>tab.modal.title</label></div><div class="col-sm-12 col-md-12 caption-description"></div></div></div>

    <div ng-if="tab.modal.type === 'blackbox'">
        <fieldset>
            <div class="col-md-12 form-group">
                <label class="">Nome compagnia</label>
                <input class="autoComplete" />
                <input type="text"/> 
                // rest of the code

查看互联网，我找到了使用事件委托的解决方案，如下所示：

   $("#bubble").on("click", ".autoComplete",function() 

        $(".autoComplete").kendoAutoComplete(
            dataSource: data, 
            filter: "startswith",
            placeholder: "Select country...",
            separator: ","
        );
    ); 

#bubble 是页面加载时已经存在的 div 的 id。 但是，此解决方案不起作用。任何想法如何解决这个问题？我已经尝试过使用类似角度的解决方案：

<input type="text" kendo-auto-complete k-data-source="data" />

其中 data 是一个数据数组。

感谢您的帮助！

编辑： 我忘了提到我正在谈论的代码在这样的模板中：

<script type="text/ng-template" id="dialogAddCompany.tpl.html">
<div class="modal-header no-header"></div>
<div class="modal-body">
    <div class="row"><div class="col-sm-12 col-md-12"><div class="modal-caption-description-title"><label>tab.modal.title</label></div><div class="col-sm-12 col-md-12 caption-description"></div></div></div>

    <div ng-if="tab.modal.type === 'blackbox'" ng-controller="aipCompanyController">
        <fieldset>
            <div class="col-md-12 form-group">
                <label class="">Element</label>
                <input kendo-auto-complete k-data-source="data"/>
                <input type="text" ng-click = "clicked()" kendo-auto-complete k-data-source="data" />

                <!--<div ap-textbox ap-options="tab.cfg.textInput.options" ap-class="'form-control'" type="text" ap-value="tab.tabData.prova"></div>-->

如果我尝试使用此模板的自动完成 OUTSIDE 创建输入文本，它工作得非常好。

【问题讨论】：

您能否提供初始化/加载 kendo 和 angular 的代码，您需要确保 kendo 是您的 angular 模块中的一个依赖项才能正常工作

@jigfox 我所说的代码是脚本标签内模板的一部分。我还尝试在模板之外创建输入文本，并且效果很好。我已经为您编辑了问题以便更好地查看代码

这不是我的意思：我问您是否可以提供更多上下文，例如您的角度模块如何初始化，如何加载剑道，如何加载角度，您能否提供代码如何加载剑道和角度，以及如何将剑道添加到模块中？

【参考方案1】：

使用 Angular，您应该使用 kendo-auto-complete 属性并像这样绑定到您的数据源：

 <input kendo-auto-complete ng-model="yourModel" k-data-source="data"  />
 <p class="demo-hint">Your selection:  dataToShow </p>

https://demos.telerik.com/kendo-ui/autocomplete/angular

【讨论】：

它应该可以工作，你肯定没有在你的角度配置中注册剑道用户界面

你需要这样的东西：var app = angular.module("your-angular-app", [ "kendo.directives" ]); 在你的代码中：docs.telerik.com/kendo-ui/AngularJS/introduction

【参考方案2】：

你可以试试这样的：

HTML：

<div id="example" ng-app="KendoDemos">
<script type="text/ng-template" id="dialogAddCompany.tpl.html">
    <div ng-controller="MyCtrl">
        <h4>Select Country /e.g. Armenia/</h4>
        <input kendo-auto-complete ng-model="country" k-data-source="countryNames" />
        <p>Your selection:  country </p>
    </div>
</script>

<a ng-click="currentTemplate='dialogAddCompany.tpl.html'">Load template</a>

<div ng-include src="currentTemplate"></div>

JS：

<script>
angular.module("KendoDemos", [ "kendo.directives" ])
       .controller("MyCtrl", function($scope)
          $scope.countryNames = [
          "Albania",
          "Andorra",
          "Armenia",
          "Austria"];
);
</script>

我在这里创建了一个工作示例：https://dojo.telerik.com/AqEraMib

【参考方案3】：

您可以在此处找到角度材料实现：

https://material.angularjs.org/latest/demo/autocomplete

它易于理解和实施。 ?

或者你可以自己看这个工具：

https://www.youtube.com/watch?v=y4gZMJKAeWs