百度搜索框提示词下拉列表的制作方法

最新推荐文章于 2026-04-28 16:49:02 发布

原创最新推荐文章于 2026-04-28 16:49:02 发布 · 4.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#搜索 #百度

收录于

angular.js入门专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种使用AngularJS框架实现百度搜索框提示词下拉列表的方法。通过JSONP跨域请求百度提供的搜索建议API，并结合前端控制器、视图更新等功能，实现了输入框文字变化时动态显示匹配建议的效果。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>百度搜索框提示词下拉列表的制作方法</title>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
    var timer = null;
    $scope.data = [];
    $scope.change = function(name){
        $timeout.cancel(timer);
        timer = $timeout(function(){
            $http({
                method : 'JSONP',
                url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK'
            }).success(function(data){
                //console.log(data);
                $scope.data = data.s;
            });
        },500); 
    };
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
    <input type="text" ng-model="name" ng-keyup="change(name)">
    <input type="button" ng-click="change(name)" value="搜索">
    <ul>
        <li ng-repeat="d in data">{{d}}</li>
    </ul>
</div>
</body>
</html>