This post concludes The making of: Franky’s Notes Azure Search. In the
previous post, I build a console application in .Net using the
RedDog.Search library, to populate an index in my Azure Search Service with my notes.
In this post, I’m sharing with you how I created the user interface to query my notes. To know more about the Azure Search REST API, all the documentation is available
online.
Objectives
For this part of the project, we will use the
azure-search javascript client of
Richard Astbury available on Github. The idea is to build a nice user interface (UI) that will provide a simple and efficient way to search. Since the code will be in JavaScript, it’s strongly suggested to use a query key instead of a master key. These keys can be managed from the
Azure Portal.
Creating the Interface
First, we need to get the azure-search. To get it, you can whether download the file azure-search.min.js on Github or by execute npm install azure-search from a Node.js console.
Now we need a simple HTML page with a form, a textbox and a button.
<html>
<head>
<title>Search</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form>
<label>Search</label>
<input id="txtSearch" placeholder="Search">
<button id="btnSearch" type="button">Search</button>
</form>
<div id="result"></div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/azure-search.min.js"></script>
<script>
var client = AzureSearch({
url: "https://frankysnotes.search.windows.net",
key:"DB7B9D1C53EC08932D8A8D5A1406D8CA"
});
</script>
</body>
</html>
As you can see I’m creating the AzureSearch client using my query key from before. Afterwards, we create a Search function to retrieve the search criteria from the textbox and pass it to the client. A dynamic function is used as a callback that receives the parameter noteList which is an array of matching documents. We finally just need to loop through the result to build a nice output.
function Search(){
var _searchCriteria = $("#txtSearch").val();
var _objSearch = {search: _searchCriteria, $orderby:'title desc'};
client.search('notes', _objSearch, function(err, noteList){
var $divResult = $("div#result");
$divResult.html( "<div class='panel-heading'><h3 class='panel-title'>" + noteList.length + " Result(s)</h3></div><div class='panel-body'>" );
if(noteList.length > 0){
var _strResult = "";
_strResult = "<ul class='list-group'>";
for(var key in noteList){
var fNote = noteList[key];
_strResult += = "<li class='list-group-item'><a href='" + fNote.url + "' target='_blank'>" + fNote.title + "</a><p>" + fNote.note + "</p></li>";
}
_strResult += "</ul></div>";
$divResult.append( _strResult );
}
});
}
If we put all this together, we got a nice result.
Live Demo
Conclusion
I really had a lot of fun creating these little applications. I found the client incredibly easy to use. I hope it will help you to get ideas and moving forward to use Azure Search. Any comments, suggestions and/or questions are welcome.
~ Frank Boucher
References
Cloud
![CDxQRhpUIAAqBij[1]](http://lh3.googleusercontent.com/-oVoj8bvItF0/VUdvQoCLNYI/AAAAAAAAVIo/eY5iz3XwHI8/s1600-h/CDxQRhpUIAAqBij%25255B1%25255D%25255B7%25255D.png "CDxQRhpUIAAqBij[1]")
