How to Create an Ajax Loader Search Box Like Arlinacode
Have you ever seen Arlinacode's search box? It turns out that blog uses an Ajax loader for its search box. How an Ajax Loader Works: When a query is typed...
Have you ever seen Arlinacode’s search box? It turns out that blog uses an Ajax loader for its search box.
How an Ajax Loader Works
When a query is typed into the search box, the search results will appear automatically. See the video below for an example of a search box with an Ajax loader.
How to Implement a Search Box Like Arlinacode
To implement it, you can use the following JavaScript code above the </body> tag.
<script src='//fiik346.github.io/js/search.js?live=true'/>
When this code is installed, it will look for an input tag with the name q. If there are more than two search forms, the first search will function as an Ajax loader search box.
To display images, you can add image=true or include the value of the image size parameter from Google image, such as w200-c or w200-h100-p-k-no-nu. For example:
<script src='//fiik346.github.io/js/search.js?live=true&image=true'/>
Or use something like this:
<script src='//fiik346.github.io/js/search.js?live=true&image=w64-c'/>
See the full documentation from dte.web.id, which you can find at Adding AJAX Search Feature to Blog
To make the search box more attractive, you can add your own CSS style.
Final Words
That’s how to create an Ajax loader search box similar to Arlinacode’s blog, and it’s very easy to implement. Be grateful to Taufik Nurrohman, the creator of this Ajax loader search box.