jQuery+AngularJS的问题?

  • 回答 (2)
  • 关注 (0)
  • 查看 (53)

希望添加一个字段来使用jqueryui中的自动完成

jQuery脚本:

$(function () {

    $('#txtProduct').autocomplete({
        source: function (request, response) {

            alert(request.term);

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

        }
    });

});
  • 必须在AngularJS的自定义指令中初始化来自jQueryUI的自动完成小部件,例如:
<div ng-app="TestApp">
    <h2>index</h2>
    <div ng-controller="TestCtrl">

        <input type="text" auto-complete>ddd</input>

    </div>
</div>

或者

<script type="text/javascript">

    var app = angular.module('TestApp', []);

    function TestCtrl($scope) { }

    app.directive('autoComplete', function () {
        return function postLink(scope, iElement, iAttrs) {

            $(function () {
                $(iElement).autocomplete({
                    source: function (req, resp) {
                        alert(req.term);
                    }
                });
            });

        }
    });

</script>
MOISTGMOISTG提问于
袁弋雯只有你回答于

如何使用$http服务

app.factory("AutoCompleteService", ["$http", function ($http) {
    return {
        search: function (term) {
            return $http.get("http://YourServiceUrl.com/" + term).then(function (response) {
                return response.data;
            });
        }
    };
}]);

指令:

app.directive("autocomplete", ["AutoCompleteService", function (AutoCompleteService) {
    return {
        restrict: "A",
        link: function (scope, elem, attr, ctrl) {
            elem.autocomplete({
                source: function (searchTerm, response) {
                    AutoCompleteService.search(searchTerm.term).then(function (autocompleteResults) {
                        response($.map(autocompleteResults, function (autocompleteResult) {
                            return {
                                label: autocompleteResult.YourDisplayProperty,
                                value: autocompleteResult 
                            }
                        }))
                    });
                },
                minLength: 3,
                select: function (event, selectedItem) {
                    // Do something with the selected item, e.g. 
                    scope.yourObject= selectedItem.item.value;
                    scope.$apply();
                    event.preventDefault();
                }
            });
        }
    };
}]);

html:

<input ng-model="YourObject" autocomplete />

回答过的其他问题

基于云计算的物联网应用场景有哪些?

袁弋雯只有你
作为北师大的学生,告诉你一个咱们学校今年的新科技——人脸识别门禁!我们宿舍全面开启“刷脸”时代,全部宿舍楼都已安装人脸识别门禁系统。新生来报到,需在人脸识别门禁的机器上进行信息采集,才能“通关”进宿舍。 人脸识别门禁系统有三种识别模式。第一种是刷校园卡后进行人脸识别。第二种是喊名...... 展开详请

视频检测和处理领域的现状和前景怎么样?

袁弋雯只有你
人工智能领域有名的专家李飞飞在2017年的Google Next Cloud大会上清楚的指出“像素(pixel)的世界已经超过了图片(picture),然而多年来视频仍是机器学习研究人员面临的挑战”, “视频就像是计算机视觉里的暗数据,我们正在开始关注数字世界的暗数据问题"。视频...... 展开详请

智能网优如何提升手游用户游戏体验?

袁弋雯只有你

在对战类手游中,比如吃鸡手游,偶尔会有卡顿现象,智能网优一方面优化网络,一方面诊断故障。对战类游戏主要是追求游戏中的快速反应带来的游戏乐趣,智能网优的出现可以让玩家玩得更加尽兴。

智能音箱的工作原理是什么?

袁弋雯只有你
智能音箱的智能语音交互系统是实现其智能化的关键技术,智能语音交互系统需要具备:1)远场识别,2)唤醒词唤醒,3)语音识别,4)语义理解。任何支持智能语音交互系统的设备都可以成为以语音作为媒介的控制中枢,因此除了智能音箱外,还可以运用于汽车、手机、可穿戴设备 [图片] ... 展开详请

如何使用Notepad ++以json格式保存文件?

袁弋雯只有你
📷 将文件另存为*.txt,然后重命名文件并将文件扩展名更改为json。... 展开详请

ElasticSearch中的bind_host和publish_host有什么区别?

袁弋雯只有你
可以将它们设置为不同的值,并且在某些情况下非常有用。这是我的用法: 我在一个数据中心有一个本地网络,我运行由不同节点组成的elasticsearch集群。这意味着每个elasticsearch机器都有两个IP地址,一个用于从外部机器到达,另一个用于本地连接到同一网络中的其他机器...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券