How to Build Custom Search Forms in Ajax

How to Build Custom Search Forms in Ajax thumbnail
Create a Google Custom Search form.

With Google Custom Search you can build a custom search form that takes advantage of Asynchronous JavaScript and XML, or AJAX, functionality. When a keyword is typed into the custom search box and the "Search" button is clicked by the user, a page of results is returned without a reload.

Instructions

    • 1

      Go to google.com/cse, then click the "Create a Custom Search Engine" button and sign into your Google account on the next page. Click the "Sign In" button to access Google Custom Search.

    • 2

      Type a name and description for the custom search engine in the fields provided. Select the language and type for the websites from which you wish to have the search form pull its results. Each site should be typed on a separate line in the Sites to Search text box.

    • 3

      Check the box next to "I Have Read and Agree to the Terms of Service," then click the "Next" button and click the "Next" button again.

    • 4

      Copy the code in the Custom Search Element Code box. To copy, highlight the code and press the "Ctrl" and "C" keys simultaneously.

    • 5

      Open a text editor program on your computer, then format a HTML document by ensuring you've included the bare minimum tags of <html>, <head> and <body>. Make sure each tag is properly escaped or closed.

    • 6

      Paste the Google Custom Search code into the <body> section of the HTML document. Save the file to your computer with a .html file extension.

    • 7

      Double-click the saved HTML file to open it in your Web browser. Type a keyword into the search form and test out the AJAX functionality as the results appear on the screen without a page reload.

Related Searches:

References

Resources

  • Photo Credit David McNew/Getty Images News/Getty Images

Comments

Related Ads

Featured