Azure Bing Autosuggest API + vue + axiosでサジェストキーワードを導入


## サジェストキーワード is ...
ユーザが入力した言葉に関連する検索キーワードの候補を提案してくれる
GoogleではGoogleオートコンプリートと呼ばれるもの、「サジェストキーワード」と言うのが一般的でしょうか。ユーザの検索条件の入力の手間を省いてくれます。
## Bing Autosuggest API v7 is ...
![Art001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151893/5ffb251f-c3e3-7b19-3946-3ecead86ebc2.jpeg)
これなんですが、自力実装となると意外と面倒。
と言うことで、Azureの手を借りて手軽にサイト内に取り入れてみました。
Bing Autosuggest APIと言うもので、以前freeがなかったようですが、現在（2019/12/31のv7ではfree：1,000 無料トランザクション / 月と言うものがあるようです。
試す程度であれば無料でいけそうです。

## azure側の準備
"Bing Autosuggest"で検索した後、以下のように入力してcreateします。
nameは被らないように適宜指定します。
![Art002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151893/5756e786-9166-b2e7-e10f-0baecba68d23.jpeg)

下記keyとendpointが必要になります。
![Art005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151893/fcea95af-c9fe-d071-5567-542d5f2c7d9f.jpeg)

## 実装準備
自前ではたいしたことやってないので実装と言うとおこがましいのですが、以下のようなものを使ってます。
### FW:[Vue.js](https://jp.vuejs.org/index.html)
著名すぎるので割愛
### CSS:[water.css](https://watercss.netlify.com/)
ページに読み込むだけでそれなりのデザインにしてくれます。デモを行うときなどに便利。

## 実装
index.html

``` html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Bing Autosuggest API + vue + axiosでサジェストキーワードを導入</title>
</head>
<body>
<div id="app">
    <queries></queries>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script> 
<script src="index.js"></script>
<script>
new Vue({
    el: '#app'
});
</script>
</body>
</html>
```

index.js

``` javascript
const key = "xxxxxxxxxxxxxxx";
const url = "https://xxxxxxxxxxxxx.cognitiveservices.azure.com/bing/v7.0/suggestions/?q=";

Vue.component('queries', {
    data: function () {
        return {
        	userInput:"",
            items: []
        }
    },
	methods: {
	    onInput: function() {
	        var self = this;
	        var option = {
			  method: 'GET',  
			  url: encodeURI(url+userInput.value),
			  headers: {
			    "Ocp-Apim-Subscription-Key": key
			  }
			};
	        axios(option).then(function (res) {
	            self.items = res.data.suggestionGroups[0].searchSuggestions;
	            console.log(self.items)
	        });
    	}
    },
    template:
    	`
    	<div>
    		<input type="text" name="userInput" id="userInput" v-model="userInput" @input="onInput"/>
	    	<select multiple="">
	        	<option v-for="item in items">{{ item.displayText }}</option>
	      	</select>
        </div>
        `
});
```

## 結果
![Art006.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151893/a6fdc457-dbe1-b875-f7bd-350329b70c62.jpeg)

コンソールに出力された内容は以下のようになります。
 
| 項目名       |       内容|
|:-----------------|------------------|:------------------:|
| url             |              検索クエリを含む検索URL |
| displayText           |            表示用テキスト |
| query             |              検索クエリ | 
| searchKind             |              WebSearch | 

## 結論
html + js 合わせて50行程度でこんなことができるのは素敵だと思う。