自Google推出即时搜索功能以来，它已成为Web设计中的流行趋势。 在线上有一些有趣的示例，例如Michael Hart的Google图片应用 。 这些技术非常简单，即使是具有jQuery经验的Web开发人员也可以选择编程API和JSON数据。

对于本教程，我想解释一下我们如何构建类似的即时搜索Web应用程序 。 与其从Google提取图片，我们还可以使用在短短几年中发展Swift的Instagram 。

这个社交网络最初是作为iOS的移动应用程序。 用户可以拍照并与朋友分享，发表评论并上传到Flickr等第三方网络。 该团队最近被Facebook收购，并为Android Market发布了一个全新的应用程序。 他们的用户基础已经极大地增长，现在开发人员可以像instasearch演示一样构建出色的微型应用程序。

    观看演示 下载源

获取API凭证

在创建任何项目文件之前，我们应该首先研究Instagram API系统背后的想法。 您将需要一个帐户来访问开发人员门户 ，该门户为初学者提供了有用的说明。 我们查询Instagram数据库所需要做的只是一个“客户端ID”。

在顶部工具栏中，单击“ 管理客户端”链接，然后单击绿色按钮“注册新客户端”。 您需要为应用程序提供名称，简短描述和网站URL。 在这种情况下，URL和重定向URI可以是相同的值，这仅是因为我们不需要验证任何用户。 只需填写所有值并生成新的应用程序详细信息即可。

您会看到一长串名为CLIENT ID的字符。 稍后在构建后端脚本时，我们将需要此密钥，因此我们将回到本节。 现在，我们可以开始构建jQuery即时搜索应用程序。

默认网页内容

index.html 
<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Instagram Photo Instant Search App with jQuery</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="ajax.js"></script>
</head>

<body>
	<div id="w">
	  <section id="sform">
	    <small>Note: No spaces or punctuation allowed. Searches are limited to one(1) keyword.</small>
	    <input type="text" id="s" name="s" class="sfield" placeholder="Enter a search tag..." autocomplete="off">
	  </section>
		
	  <section id="photos"></section>
	</div>
</body>
</html>

我正在使用最新的jQuery 1.7.2库以及两个外部.css和.js资源。 输入搜索字段没有外部表单包装器，因为我们不想提交表单并导致页面重新加载。 我在搜索字段中禁用了一些按键操作，以便在用户键入时有更多有限的限制。

我们将在中间部分ID #photos中填充所有照片数据。 它使我们的基本HTML保持整洁且易于阅读。 所有其他内部HTML元素将通过jQuery添加，并且在每次新搜索之前也将被删除。

从API中提取

instasearch.php 
<?php
header('Content-type: application/json');

$client = "YOURCLIENTIDHERE";
$query = $_POST['q'];
$api = "https://api.instagram.com/v1/tags/".$query."/media/recent?client_id=".$client;

function get_curl($url) {
    if(function_exists('curl_init')) {
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL,$url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); 
        $output = curl_exec($ch);
        echo curl_error($ch);
        curl_close($ch);
        return $output;
    } else{
        return file_get_contents($url);
    }
}
$client get_curl()

如果您尚未激活cURL，这将尝试激活功能并通过其自己的函数库提取数据。 否则，我们可以简单地使用file_get_contents（） ，它虽然速度较慢，但​​仍然可以正常工作。 然后，我们实际上可以将这些数据拉入一个变量，如下所示：

$response = get_curl($api);

组织和返回数据

我们可以从Instagram返回此原始JSON响应，并加载所有信息。 但是有太多额外的数据，遍历所有内容非常烦人。 我更喜欢组织Ajax响应并确切地提取我们需要哪些数据。

foreach() 
$images = array();
if($response){
	foreach(json_decode($response)->data as $item){		
        $src = $item->images->standard_resolution->url;
        $thumb = $item->images->thumbnail->url;
		$url = $item->link;
		
        $images[] = array(
        "src" => htmlspecialchars($src),
        "thumb" => htmlspecialchars($thumb),
        "url" => htmlspecialchars($url)
        );

    }
}

那些不熟悉PHP循环的人可能会在此过程中迷路。 如果您不了解语法，请不要过多地关注这些代码段。 我们的图像阵列将包含从最新发布日期提取的最多16-20张独特的照片条目。 然后，我们可以将所有这些代码作为jQuery Ajax响应输出到页面上。

print_r(str_replace('\\/', '/', json_encode($images)));
die();

但是，既然我们已经了解了幕后情况，就可以跳入前端脚本了。 我创建了一个文件ajax.js ，其中包含绑定到搜索字段的几个事件处理程序。 如果您到现在仍在跟进，那么请激动一下，我们已经接近完成！

jQuery关键事件

ready() 
$(document).ready(function(){
  var sfield = $("#s");
  var container = $("#photos");
  var timer;
instaSearch() 
/** 
 * keycode glossary 
 * 32 = SPACE
 * 188 = COMMA
 * 189 = DASH
 * 190 = PERIOD
 * 191 = BACKSLASH
 * 13 = ENTER
 * 219 = LEFT BRACKET
 * 220 = FORWARD SLASH
 * 221 = RIGHT BRACKET
 */
$(sfield).keydown(function(e){
  if(e.keyCode == '32' || e.keyCode == '188' || e.keyCode == '189' || e.keyCode == '13' || e.keyCode == '190' || e.keyCode == '219' || e.keyCode == '221' || e.keyCode == '191' || e.keyCode == '220') {
	 e.preventDefault();
   } else {
		clearTimeout(timer);
	
		timer = setTimeout(function() {
		  instaSearch();
		}, 900);   
   }
});

每次更新值时，它将自动获取新的搜索结果。 我们可能还阻止了许多其他关键代码来触发Ajax函数-但在本教程中无法列出。

Ajax instaSearch（）函数

在我的新自定义函数中，我们首先在搜索字段中添加一个“正在加载”类。 此类将更新相机图标以获取新的加载gif图像。 我们还希望清空照片部分中剩余的所有可能数据。 查询变量是从搜索字段中输入的当前值动态提取的。

function instaSearch() {
	$(sfield).addClass("loading");
	$(container).empty();
	var q = $(sfield).val();
	
	$.ajax({
		type: 'POST',
		url: 'instasearch.php',
		data: "q="+q,
		success: function(data){
			$(sfield).removeClass("loading");
			
			$.each(data, function(i, item) {
				var ncode = '<div class="p"><a target="_blank" href="'+data[i].src+'" class="fullsize" target="_blank"><img src="img/full-image.png" alt="fullsize"></a> <a target="_blank" href="'+data[i].url+'" target="_blank"><img src="'+data[i].thumb+'"></a></div>';
				$(container).append(ncode);
			});
		},
		error: function(xhr, type, exception) { 
			$(sfield).removeClass("loading");
			$(container).html("Error: " + type); 
		}
	});
}

如果您熟悉.ajax（）函数，那么所有这些参数都应该看起来很熟悉。 我将用户搜索参数“ q”作为POST数据传递。 成功或失败后，我们将删除“正在加载”类，并将所有响应附加回#photos包装器。

在成功函数中，我们遍历最终的JSON响应以提取单个div元素。 我们可以使用$ .each（）函数并以响应数据数组为目标来完成此循环。 否则，失败方法将直接从Instagram API输出任何响应错误消息。 这就是所有的一切！

    观看演示 下载源

最后的想法

Instagram团队在扩展如此庞大的应用程序方面做得非常出色。 该API有时可能很慢，但是响应数据始终采用正确的格式并且非常易于使用。 我希望本教程可以证明在第三方应用程序上有很多功能。

不幸的是，当前的Instagram搜索查询一次不允许超过1个标签。 这仅限于我们的演示，但它肯定不会消除其任何魅力。 您应该查看上面的实时示例并下载我的源代码副本以进行试用。 另外，请在下面的帖子讨论区中告诉我们您的想法。


翻译自: https://www.hongkiat.com/blog/instagram-photo-search/