If your website has many pages, a good job search function becomes more important. Is your website based on WordPress? Then you don’t need to worry about the search function, because this is a standard feature. But what about an extraordinary search experience? Relevant search results are one part of the game, but what about the search interface? Ajax Live search will help your visitors find your information faster without re -loading the current page. Sounds like magic? No! In this blog post I will tell you all about the search Ajax.

What is AJAX and how does Ajax search work?

Ajax is not so new and that is a struggle Javascript Asynchronous and XML. By using this technology, your script will post a request to the server and in return the script will get a response without re -loading pages. As the name suggests, the data sent must be formatted as a XML structure.

Ajax search is no more than a regular search request post by web forms, but the whole process is carried out in the background using javascript. The Javascript code will use the search value of the field field for the request for Ajax and the server will use the data received for the database query. The response was returned to the same javascript file and finally forwarded to the HTML page.

Every time the user puts more characters into the search field, new requests are sent to the server. The typical Ajax search will work with the “Input” event that was fired after the value of the form element was changed.

Search Ajax vs Regular Search

Based on the information above, it seems that Ajax’s search is a good substitute for regular search. Of course, there are many advantages:

  • Validation of Basic Forms Without Server Demand
  • Frontend and backend code is separated
  • Search faster and more user friendly
  • Combine the value of the shape element without re -loaning the page
  • Using Ajax Search on Static Websites

But there are also weaknesses, such as:

  • The problem of accessibility, because the response is published dynamically into the HTML structure
  • The validation of the server side data is still needed
  • The browser back button does not bring you back to the previous search results (compared to the results of the results with a query string in the URL)
  • A higher server load because new requests are sent with each character typed in the search form
  • You cannot create a page (in -cache) for search results.

Which of the two best search interfaces, depending on your website and how visitors use your search function. Check your direct search Ajax on different devices such as iPad and mobile. Search may not work for users on small screens.

Sample search code directly AJAX

For example, I have used the JQuery library which has a different method to handle Ajax request. On the server side I use a small PHP script to ask the MySQL database. For the HTML page I use a starter template for the CSS Bootstrap frame.

The important part of the index.html file starts in line 37. In the element form I have an element with the “Ajax-Search” class. I use the class name for style. Id “keyword” from the input element is used later to discuss the search value. The list elements that are not ordered are used for direct search results AJAX.

Enter a different database parameter to create a database connection. If the posting variable is called “the keyword” is not empty and the value is longer or equal to 3, then the value will be sanitated and added to the MySQL query. If the database queries have a row, the loop is used to continue the value into the array. In the end we issued array data in a string that was formatted by Json.

In row 2-4 we store the value of the “keyword” element in the “SearchKeyword” variable and is used rather than some simple validation. Only if the length of the string is larger or equal to 3, the variable is used to post data to the server (search.php file). If the callback function sends a response back, the content container gets the second CSS class and the string that is formatted by JSON is described as an element of the list in the loop starting from line 7.

If the “SearchKeyword” variable is shorter than 3 characters, the content container will be emptied and the “active” class is deleted from the element.

The sample code is very basic, but gives a good idea how easy it is to make a direct search AJAX for your website. If you want to see the action code, just try direct search demo. You can download the sample code including my CSS style The core in github.

Ajax Live Search for WordPress Website

WordPress has a good original search mechanism and there are also many plugins that increase search results and search interfaces. This is not a lot of work to change the code (PHP) for WordPress, but there is a much better solution.

Searchwp live just search

I use this plugin for several client websites and the main reason is, it works. For most WordPress themes, the “Working Box Plugin”. Just activate the plugin and start using it. This plugin is written for the search for plugins, but also functions perfectly if you use something else.

Do you need more control over search results on your WordPress website? Use searchwp plugins too. The free version works well for the “normal” website and blog site and if you need more, quite upgraded to the premium version.

Direct search function Ajax in the WordPress theme

The search function Ajax is also included in many WordPress themes. If you use one of the themes, additional plugins are not needed. We found a just searches in themes like Oceanwp (Through the core extension bundle), flat and tame.

Ajax Live Search for Webshops with WooCommerce

Ajax’s search and filter is very important for webshops. For many client projects, I use the Premium Plugin ‘FaceTWP’, which offers not only direct search features, but also filtering taxonomy and other product attributes. You will find more plugins if you are looking for a WordPress plugin repository,

Are there other search options?

If you don’t have a WordPress website or search on your special website not functioning properly, you can try the following options:

Google Custom search engine

This is probably the easiest way to create a site search for your website. Enough to make your own search engine and let Google do the job. Except for the search widget, you don’t need to change any code on your website. The search widget does not have direct search features, but the entire search engine is based on Ajax.

Doofinder

If your website is built with a database, doofinder may be an option even if your website is not based on WordPress. By providing data bait, doofinder will build a search index for your website. The result? Ajax -powered search features as you know from a larger webshop. The free version is only good for smaller sites, but in my opinion a bigger (paid) plan than Doofinder is also affordable.

Search

This site search is similar to Doofinderbut also has a complete WordPress plugin. They offer interesting features such as searching for cross domains and they can crawl all of your websites, if you can’t provide data bait. The temporary function is based on Ajax and the search widget also offers a Live Ajax search. The free version is good for websites with 2000 pages.

Not sure which solution is the best for your website? Try everything and decide at that time. All options that we mentioned are available for free or offer free trials.

Published in: JQuery Code · WordPress Development



Game Center

Game News

Review Film
Rumus Matematika
Anime Batch
Berita Terkini
Berita Terkini
Berita Terkini
Berita Terkini
review anime

Gaming Center

Kiriman serupa