Skip to content

someguy9/sayt.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Search as you Type Javascript Demo

What is sayt.js?

After seeing Google's search as you type dropdown on ecommerce sites (example lowes.com) using their ecommerce plugins I found it hard to replicate their autocomplete features using current plugins. Most were out dated or made it very hard to mix images in with results including twitter's typeahead. So here's my take on the plugin using vanilla Javascript, here's sayt.js. Perfect for sites that have a built-in search with mixed data. Currently you have to use a json file you produce, so if you want to use external data you'll need to format it into the JSON structure listed below.

Read my blog post about this plugin https://drawne.com/blog/search-as-you-type-jquery-plugin-sayt-js/

To-do

  • Allow formatting of results to allow external data sources

You can view an example of this script on my site -> https://drawne.com/demo/sayt.js.

Download

Grab the latest copy via Github

Usage

document.addEventListener('DOMContentLoaded', function () {
  sayt( document.querySelector('.search-box'), {
    src: 'path-to-your/json/script'
  });
});

This is the most basic code you need, it'll automatically include sayt.css in your page which can be turned off with the includeCSS variable. Be sure to see all of the variables below for more options.

Hooks

Name Description Example
src URL of your json script, make sure to view the example sayt-json.php for formatting your json "mysite.com/json-search.php"
inputId The ID of the search results div that appears, % will be overwritten with the ID of the input "%-search"
classPrefix Overwrites the default classes of elements in the search results div, great for removing the default css "mysearchresults-"
noResultsText Text that shows up when there are no results "404 No Results Found"
inputWidth The width you want your search results div to be, default of this just grabs the width of your input 400
minChars Amount of characters in your input before a search is triggered 3
showSectionHeadings Displays the title of sections, great if you have multiple categories true
showDescription If your json includes description tags, you can choose to show them or not true
showImages If you don't want to show images in your results it can be turned off here false
includeCSS If you don't want to automatically include the default stylesheet set this to false true
seeAllLink Add a see all link to the bottom of the search, this link basically just submits your form true

JSON Structure

    {
        "section": {
            "title": "Section Name",
            "num": "2",
            "limit": "3"
        },
        "data": [
            {
                "title": "Go to Google",
                "url": "https://www.google.com/",
                "onclick": "alert('Javascript!')"
            },
            {
                "title": "Title of the Results",
                "description": "Text displayed under the title",
                "image": "url of image to be shown",
                "url": "url of the page you want this to link to"
            }
        ]
    }

num under section is used for the number of results, and the limit is how many you would like to show.

The basics are a repeating set of sections and data as seen above, I do not actually include a php script for searching your data but feel free to use any language for your resulting json.

About

Create a Search as you Type field quickly with this Javascript plugin

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published