angular的仿百度搜索功能

尝试一下调用百度的搜索功能,这部分主要是练习$http。

首先HTML部分:

<div ng-app="myApp" ng-controller="Aaa"">
  <input type="text" ng-model="name" ng-keyup="change(name)" placeholder="请输入搜索内容">//内容的搜索框
  <input type="button" ng-click="change(name)" value="搜索">  // 搜索按钮
  <ul>
    <li ng-repeat="da in data">{{ da }}</li>  //搜索到的内容
  </ul>
</div>

HTML布局完成,现在设置一下样式

CSS:

<style>
  li{
    width: 600px;
    height: 30px;
    list-style: none;
    background: #b6b6b6;
    color:purple;
    margin-top: 20px;
}
</style>

接下来是js代码部分:

<script src="js/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‘
// 百度用的jQ的方式,在angular中要改成JSON_CALLBACK才能收到回调信息。
        }).success(function(data){
            console.log(data);
            $scope.data = data.s;
        });
      },400);
    };
  }]);
</script>

//这样一个简单的仿百度的搜索功能就实现了,如果出现问题就放在服务器下运行。

时间: 2024-10-08 08:15:39

angular的仿百度搜索功能的相关文章

仿百度搜索功能

/** *鼠标选中某个li方法 *1.参数obj:this */function ulLiText(obj) {    //检索条件可按名称字母查询    $("#nameZm").val($(obj).text());    //调用省级列表    getAreaList();    //隐藏检索信息    $("#carName").hide();} //显示背景颜色 $('#carName ul li').mouseover(function () {    

vue-resource使用 (vue仿百度搜索)

1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> network ==> 复制js https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1440_25548_21098_20719&req=2&csor=1&c

百度搜索功能

<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>百度搜索</title> <script src="js/angular.min.js"></script> <script>  var m1=angula

仿百度搜索提示框效果

<!doctype html><html><head> <meta charset="UTF-8"> <title>百度搜索提示框</title> <style> * { margin: 0;padding: 0; outline: none;} .search101 { width: 650px; margin: 300px auto; font-size: 0; } .sou1 { width: 5

仿百度搜索(AJAX)

<h1>百度搜索</h1><!--建立一个DIV,其中包括一个文本输入框和一个按钮--><div id="sousuo"> <input type="text" id="txt"/><input type="button" id="btn" value="搜索" /> <!--再建一个DIV用于显示关键字查询出

仿百度搜索,匹配历史搜索

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>历史搜索</title> <script type="text

使用Jquery UI 高仿百度搜索下拉列表功能

最近项目有个需求,在新添加商户的时候,用户输入商户名称后,如果系统中有类似的商户名称,直接显示出来,如下图的效果: 实现这个功能,直接使用了JQuery UI 插件 目前我使用的实现版本是: 网友可以自行下载好js文件,css文件,放在你项目可以访问到位置就可以了. 引入这些文件之后,你就可以复制使用下面的页面来测试(注意引用文件的路径): <!doctype html><html lang="en"><head> <meta charset=

Ajax 连接数据库实现类似百度搜索功能

1.Html代码部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

ashx仿百度搜索的自动下拉列表

制作环境是在c#中 先是前台页面,可以是aspx也可以是html页面,这就是ashx的好处 代码: 1 <div> 2 <input type="text" id="search" onkeyup="SearchTo()" /><input type="button" value="查询" /><br /> 3 <div id="search_