首頁 web前端 js教程 $http實作百度搜尋動態下拉框

$http實作百度搜尋動態下拉框

Mar 01, 2018 am 09:54 AM
http 動態 搜尋

本文主要和大家分享angularJs-$http實現百度搜尋時的動態下拉框範例,具有很好的參考價值,希望對大家有所幫助。一起跟著小編過來看看吧,希望能幫助大家。

實例如下所示:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
     p{
      overflow: hidden;
      margin-top: 50px;
      margin-left: 500px;
     }
     .container{
      width: 250px;
      padding: 0;
     }
     .container li{
      list-style: none;
      border: 1px dotted gray;
      width: inherit;
     }
   </style>
  </head>
  <body>
   <p ng-controller="myCtrl">
     <input type="text" ng-model="name" placeholder="请输入内容..." ng-keyup="change(name)"/>
     <input type="button" name="" id="" value="搜索" ng-click="change(name)"/>
     <ul class="container">
      <li ng-repeat=" d in mes">{{d}}</li>
     </ul>
   </p>
  </body>
  <script src="angular.min.js"></script>
  <script src="angular-route.min.js"></script>
  <script src="angular-ui-router.min.js"></script>
  <script type="text/javascript">
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope,$http,$timeout){
     $scope.mes = [] ;
     var timer = null ;
     $scope.change = function(name){
      $timeout.cancel(timer);
      timer = $timeout(function(){
      
        $http({
        method:"JSONP",
        url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+name+"&json=1&p=3&sid=&req=2&csor=8&cb=JSON_CALLBACK"
        })
        .success(function(data){
         $scope.mes = data.s;
         console.log(data.s);
        })
      },500)
           
     }
   })
  </script>
</html>
登入後複製

相關推薦:

#angularjs利用$http異步上傳Excel檔案方法分享

AngularJS中$http服務內容

angularJS實作$http.post和$http.get請求的程式碼詳解

以上是$http實作百度搜尋動態下拉框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

將VirtualBox固定磁碟轉換為動態磁碟,反之亦然 將VirtualBox固定磁碟轉換為動態磁碟,反之亦然 Mar 25, 2024 am 09:36 AM

在建立虛擬機器時,系統會要求您選擇磁碟類型,您可以選擇固定磁碟或動態磁碟。如果您選擇了固定磁碟,後來意識到需要動態磁碟,或者相反,該怎麼辦?好!你可以把一種轉換成另一種。在這篇文章中,我們將看到如何將VirtualBox固定磁碟轉換為動態磁碟,反之亦然。動態磁碟是一種虛擬硬碟,它最初具有較小的大小,隨著您在虛擬機器中儲存數據,其大小會相應增長。動態磁碟在節省儲存空間方面非常高效,因為它們只佔用所需的主機儲存空間。然而,隨著磁碟容量的擴展,可能會稍微影響電腦的效能。固定磁碟和動態磁碟是虛擬機器中常用的

百度進階搜尋怎麼用 百度進階搜尋怎麼用 Feb 22, 2024 am 11:09 AM

百度高級搜尋怎麼用百度搜尋引擎是目前中國最常用的搜尋引擎之一,它提供了豐富的搜尋功能,其中之一就是進階搜尋。進階搜尋可以幫助使用者更精確地搜尋到所需的信息,提高搜尋效率。那麼,百度高級搜尋要怎麼使用呢?第一步,打開百度搜尋引擎首頁。首先,我們需要開啟一個百度的官方網站,也就是www.baidu.com。這是百度搜索的入口。第二步,點選進階搜尋按鈕。在百度搜尋框的右側,有

閒魚怎麼搜尋用戶 閒魚怎麼搜尋用戶 Feb 24, 2024 am 11:25 AM

閒魚怎麼搜尋用戶?在軟體閒魚中,我們可以直接在軟體裡面去找想要溝通的使用者。但卻不清楚該怎麼搜尋用戶。在搜尋後的用戶中查看即可。接下來就是小編為用戶帶來的搜尋用戶方式介紹的介紹,有興趣的用戶快來一起看看吧!閒魚怎麼搜尋用戶答:在搜尋後的用戶中查看詳情介紹:1、進入軟體,點選搜尋框。 2、輸入使用者名稱,點選搜尋。 3.再選擇搜尋框下的【用戶】,即可找到對應用戶了。

wps表格找不到正在搜尋的資料,請檢查搜尋選項位置 wps表格找不到正在搜尋的資料,請檢查搜尋選項位置 Mar 19, 2024 pm 10:13 PM

智能為主導的時代,辦公室軟體也普及開來,Wps表格由於它的靈活性被廣大的辦公室人員採用。在工作上要求我們不只是要學會簡單的表格製作和文字輸入,我們要掌握更多的操作技能,才能完成實際工作中的任務,有數據的報表,運用表格更方便更清楚更準確。今天我們帶給大家的課程是:wps表格找不到正在搜尋的資料,為什麼請檢查搜尋選項位置? 1.先選取Excel表格,雙擊開啟。然後在該介面中,選取所有的儲存格。  2、然後在該介面中,點選頂部工具列裡「檔案」裡的「編輯」選項。  3、其次在該介面中,點選頂部工具列裡的“

瞭解網頁重定向的常見應用場景並了解HTTP301狀態碼 瞭解網頁重定向的常見應用場景並了解HTTP301狀態碼 Feb 18, 2024 pm 08:41 PM

掌握HTTP301狀態碼的意思:網頁重定向的常見應用場景隨著網路的快速發展,人們對網頁互動的要求也越來越高。在網頁設計領域,網頁重定向是一種常見且重要的技術,透過HTTP301狀態碼來實現。本文將探討HTTP301狀態碼的意義以及在網頁重新導向中的常見應用場景。 HTTP301狀態碼是指永久重新導向(PermanentRedirect)。當伺服器接收到客戶端發

手機淘寶怎麼搜尋店鋪 搜尋店舖名的方法 手機淘寶怎麼搜尋店鋪 搜尋店舖名的方法 Mar 13, 2024 am 11:00 AM

手機淘寶app軟體內提供的商品好物非常多,隨時隨地想買就買,而且件件都是正品,每一件商品的價格標籤一清二楚,完全沒有任何的複雜操作,享受更加便捷的購物樂趣。隨心所欲自由搜尋選購,不同品類的商品板塊都是開放的,添加個人的收貨地址以及聯絡電話,方便快遞公司聯繫到你,實時查看最新的物流動態,那麼有些新人用戶第一次使用它,不知道如何搜尋商品,當然只需要在搜尋欄輸入關鍵字就能找到所有的商品結果,自由選購根本停不下來,現在小編在線詳細為手機淘寶用戶們帶來搜尋店鋪名的方法。  1.先打開手機淘寶app,

阿里雲盤怎麼搜尋別人的資源 阿里雲盤怎麼搜尋別人的資源 Mar 30, 2024 am 10:31 AM

阿里雲盤,這款備受歡迎的儲存工具,不僅可以幫助我們有效率地管理個人資源,還提供了許多便利功能。那麼許多用戶在搜尋雲盤資源的時候,可能會搜不到,所以想要搜尋全盤的所有資源,那麼在下文中就由本站小編來為大家詳細解答這一問題,分享具體的搜尋方法,想要了解的使用者就快來跟著本文一起操作了解吧!阿里雲盤搜怎麼索別人的資源1、先在阿里雲盤的資料夾目錄中搜尋資源檔案的具體路徑即可找到對應的資料夾了。 2.然後使用文件搜尋功能,輸入想要尋找的關鍵字即可找到相關的文件內容。 3.接著我們透過其他人分享鏈接,直接定位和下

Excel搜尋快捷鍵是什麼 Excel搜尋快捷鍵是什麼 Mar 20, 2024 am 10:52 AM

想知道Excel搜尋快捷鍵是什麼嗎?答案很簡單,只要用到【Ctrl+F】就能進行快速搜尋了。我們常用Excel來記錄很多不同的資料和名稱,如果需要改變的時候,因為資料太多,我們在尋找的時候會很不方便,這樣找起來會相當麻煩。其實,我們完全可以用快速搜尋的捷徑來找到我們需要更改的資料!那麼,Excel的搜尋快捷鍵是什麼呢?今天就來教大家excel表格裡面的快捷查找按鍵,為你們的工作省心省力。這裡我用的是本MicrosoftOfficeexcel2010版本來進行示範的,有需要的同學可以

See all articles