【问题标题】:AngularJS + BootstrapUI : Autocomplete is not loading optionsAngularJS + BootstrapUI:自动完成未加载选项
【发布时间】:2021-06-30 23:21:51
【问题描述】:

我正在尝试使用 Ui-Bootstrap 自动完成加载常用名称。

当我输入时,我可以看到列表被加载的次数与该字母重复的次数完全一致!但它没有显示名称。我可以看到href标签没有价值!

我肯定在这里遗漏了一些东西。想法?

笔:https://codepen.io/vbbalaji/pen/qBRjRGm

        <span class='py-2 mb-2'>Please enter your name</span>
        <div class='container mb-2'>
            <div class='row'>
                <div class='col-3 text-right py-2 my-1'>Name</div>
                <div class='col-9 vlight-blue py-2 my-1 rounded-lg text-left px-1'>
                    <div class='d-inline-block'>
                        <input type='text' style="text-transform:capitalize;" 
                        id='custName' placeholder='Type your Name' ng-model="CustomerName" value='' 
                        typeahead='name for name in commonNames | filter:$viewValue | limitTo:8' typeahead-show-hint="true" 
                        class="ttInput rounded-lg">
                    </div>
                    <button class='btn btn-xxs btn-danger alignright' ng-click='ClearCustName()'>CLEAR</button>
                </div>
                <button class='btn btn-primary btn-xxs mt-2' id='btnUpd' ng-click="UpdateCurOrder(1)"><i class="fas fa-save px-1"></i>Save</button>
            </div>
        </div>
    </div>

【问题讨论】:

    标签: angularjs autocomplete


    【解决方案1】:
    I think you have missed to include required external javascript files reference in the application or html page and same I can see in the provided codepen link.
    Include the required external javascript/css reference in head tag of your main page.
    For your reference replace your head tag code with below head tag (which has external references) in the codepen and it should work
    
      <head>
        <style>
            .bgVideo { height: 100vh;}
        </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-sanitize.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-route.min.js"></script>
        <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    

    【讨论】:

    • 欢迎来到 Stackoverflow。为了方便阅读您的答案,我建议您从代码模式中删除描述部分。谢谢。
    猜你喜欢
    • 2017-07-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-14
    • 2014-07-04
    相关资源
    最近更新 更多