Suggest.js

It's a lightweight javascript library which enable users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering

This Autocomplete component provides suggestions while you type into the input field.

Demo

Click me --:

Library Support

jQuery
Zepto

Browser Support

Internet Explorer 8+
Chrome 10+
Firefox 3.5+
Safari 4+
Opera 11+

Dependencies

nCache.js
JSONPErrorSupport.js
cookie.js (required only if prefData.userCookie parameter enabled)

Getting Started

Include the Style Sheet for suggestor design.
Include the suggestor javascript library.
Add required HTML HTML.

Features

Autocomplete: Displays suggestions to end-users as they type

Highlights query matches within the suggestion
Support single or Multiple Datasets/groups
Triggers custom events
Prefetching ( using Local Storage): Prefetched data is fetched and processed on initialization. If the browser supports local storage, the processed data will be cached there to prevent additional network requests on subsequent page loads.
Intelligent caching(URL based cashing support)
Autocorrect feature (suggest autocorrect suggestions if user type wrong/misspell word)
Related concept (show related suggestions when user press commma or select any record)
Show User's History for quick selection
UserBased data personalization support by userID and history keywords
Track user's interactions: Record all user's history like what user select and at which location. kindly refer below listed JSON format for more details

{
    "lgData": {
        "kwdsugg": {
            "Events": [
                {
                    "type": "ac",
                    "acFor": "ja",
                    "sel": "java fresher",
                    "pos": 6,
                    "cached": true
                },
                {
                    "type": "rc",
                    "rcFor": "java fresher",
                    "sel": "Oracle",
                    "pos": 5,
                    "cached": false
                },
                {
                    "type": "rc",
                    "rcFor": "java fresher",
                    "sel": "Servlets",
                    "pos": 7,
                    "cached": false
                }
            ],
            "sId": "5000",
            "appId": 108,
            "platform": "mobile",
            "formId": "searchForm"
        },
        "locsugg": {
            "Events": [
                {
                    "type": "ac",
                    "acFor": "de",
                    "sel": "delhi/ncr",
                    "pos": 2,
                    "cached": false
                },
                {
                    "type": "ac",
                    "acFor": "pu",
                    "sel": "pune",
                    "pos": 1,
                    "cached": false
                }
            ],
            "appId": 108,
            "platform": "mobile",
            "formId": "searchForm"
        }
    }
}

Where:
"ac":       autocomplete
"acFor":    autocomplete for
"sel":      selection
"pos":      position
"cached":   true-> data served from localCache and false -> data served from server
"rc":       related concepts
"rcFor":    related Concepts for
"sId":      source Id
"appId":    application Id
"platform": can be Desktop/Mobile
"kwdsugg":  suggestor Id
"lgData":   fixed value

Data Flow Diagram

Usage

HTML

<div class="suggest">
    <div class="sWrap">
        <div class="iconWrap"><a class="sSearch"></a><a class="sCross"></a><span class="nLoder"></span></div>   
        <div class="inpWrap">            
            <input class="sugInp" type="text" placeholder="Search"> 
        </div>            
    </div>
</div>

Call

    
$('.suggest').suggestor({
    domain: "http://suggest.naukimg.com/demo",  // mandatory parameter
    category: {                                 // mandatory parameter
        'location': "Locations"                 // location --> bucket/category and Locations --> heading/title
    }
});

Data Format

{
    "resultList": {				
        "top": [{
            "id": 0,
            "displayTextEn": "Javascript"
        }, {
            "id": 1,
            "displayTextEn": "Java Servlets"
        }, {
            "id": 2,
            "displayTextEn": "Java SE"
        }],
        "location": [{
            "id": '101',
            "displayTextEn": "Delhi"
        }, {
            "id":'102',
            "displayTextEn": "Mumbai"
        }]
    }
}


Where:

// resultList/resultConcepts:   The value of this  key can be "resultList" or "resultConcepts",  Where:
                                //	resultList: refer autocomplete/suggestion list 
                                // resultConcepts: refer autoconcepts/related Concepts/Related keywords list
// top/location: This key type of cateogry/buckets/group. It can be any string value
// id: Id of text and can be a type of number or string
// displayTextEn: Suggestion text

Parameters (Options)

Name	Description
appId	Corresponds to the application which use auto-suggestor.
autoComplete	URL which return autocomplete data as per query.
checkVersion	URL which return the current version of the autoSuggestor library.
category	top, skill, title, location, company, institute (all are case sensitive and can be used as per project requirement). Note: At least one field is mandatory and it can be any one.
getRelatedConcepts	It's a callback function to get RC list.
grouping (Default: true)	Enable/Disable data to show in a group/buckets or not.
multiSearch (Default: false)	if set true then the user can search multiple records by add comma before next query string.
maxSuggestions	Set the maximum number of suggestion shown corresponding to each data set (Default: 10)
maxHeight	Set the maximum height of suggestor layer, if no of suggestions exceed from the current drop layer height then scroll will show.
onSelect	it's a callback function which trigger when and suggestion choose from the suggestion drop layer.
placeholder (Default: false)	if set true then set the placeholder for the browser which does not support placeholder.
prefetch	URL which return prefetch data for local Storage. Prefetch data is fetched and processed on initialization. If the browser supports local storage, the processed data will be cached to prevent additional network requests on subsequent page loads. WARNING: While it's possible to get away with it for smaller data sets, prefetch data isn't meant to contain entire data sets. Rather, it should act as a first-level cache for suggestions. If don't keep this warning in mind, you run the risk of hitting local storage limits.
relatedConceptsCategory (Mandatory)	category for related concepts suggestions.
relatedConcept_dataLayer (Default: true)	to prevent show RC list to user , pass RC object data to callback function "getRelatedConcepts"
relatedConceptsLimit (Default: none)	Related suggestions will stop when counter reached to it's maximum value.
relatedConcept	URL which return related concepts JSON data. (keyboard handling: Use CTRL+ right Arrow Key to switch to arrow)
returnFocus (Default: false)	to disable focus on input field after selection.
sourceId (optional)	it's a subset of appId. It tells from which page(under appId) a request is being made.
startSearchAfter (Default: 1)	(As user type search begins), It set the limit after how many character search begins.
showRelatedConcept (Default: true)	To disabled related concepts.
showDataOnFocus (optional)	to show data when user focus/click on suggestor box
suggestOnClick (optional) (Default: true)	to disabled related concepts feature
showTitleForSingleBucket (Default: false)	to show title if data is only for one bucket
titleForSingleBucket (Default: 'Last Searched Keywords')	tittle for single bucket if required
trackUserInteraction (optional) (Default: false)	to track user interaction with the suggestor. It captures user selection and position.
url	An object contains the group of URLs(autoComplete, relatedConcept, checkVersion, prefetch)
whiteListSpecialChar (Default: none)	To enable special character in query

url

url: This object contains the group of URLs. (autoComplete, relatedConcept, checkVersion, prefetch)

By default suggest.js get data from URLs with listed below format

checkVersion    -->  domain + '/suggest/v?',
prefetch        -->  domain + '/suggest/prefetch?'
autoComplete    -->  domain + '/suggest/autocomplete?',
relatedConcept  -->  domain + '/suggest/autoconcepts?',

But you can also overwrite above format by "url" parameter e.g.

var myCustomURLs = {
        checkVersion:   'http://mydomain.com/version?',
        prefetch:       'http://mydomain.com/prefetchData?'
        autoComplete:   'http://mydomain.com/autocompelteData?',
        relatedConcept: 'http://mydomain.com/reletedConceptData?',
    }


$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    url: myCustomURLs               // to overwrite defaults format of url with your custom url format
});

appId

appId | Corresponds to the application which use auto-suggestor.

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    appId : 1021
});

sourceId

sourceId (optional)| it's a subset of appId. It tells from which page(under appId) a request is being made.

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    sourceId : 21
});

multiSearch

multiSearch (Default: false)| if set true then the user can search multiple records by add comma before next query string.

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    multiSearch : true
});

startSearchAfter

startSearchAfter (Default: 1) | (As user type search begins), It set the limit after how many character search begins.

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    startSearchAfter : 2
});

maxSuggestions

maxSuggestions | Set the maximum number of suggestion shown corresponding to each data set (Default: 10)

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    maxSuggestions : 5
});

placeholder

placeholder (Default: false)| if set true then set the placeholder for the browser which does not support placeholder.

    $('.suggest').suggestor({
        url: dataURLs,
        prefetchKey: '__infoEdge/json/prefetch',
        placeholder:true
    });

onSelect

onSelect | it's a callback function which trigger when and suggestion choose from the suggestion drop layer.

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    onSelect: function(){
                console.log('Hello, Did you call me ?')
    }
});

showRelatedConcept

showRelatedConcept (Default: true)| To disabled related concepts suggestions.

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    showRelatedConcept:false
});

whiteListSpecialChar

whiteListSpecialChar (Default: none)| To enable special character in query

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    whiteListSpecialChar: '#+./'
});

relatedConceptsCategory

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    relatedConceptsCategory: {
        'skill': 'Skills'
    }
});

relatedConceptsMaxCounter

relatedConceptsMaxCounter (Default: none)| Related suggestions will stop when counter reached to it's maximum value.

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    relatedConceptsMaxCounter: 5
});

grouping

grouping (Default: true)| Enable/Disable data to show in a group/buckets or not.

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    grouping : false
});

suggestOnClick

suggestOnClick (optional): to disabled related concepts feature

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    suggestOnClick : false
});

trackUserInteraction

trackUserInteraction (optional): to track user interaction with the suggestor. It capture user selection and position.

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    trackUserInteraction : true
});

getTrackUserInteractionData

getTrackUserInteractionData (optional): to get user's interation data in this function.

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    getTrackUserInteractionData function(data) {
        console.log(data)
    }
});

showDataOnFocus

showDataOnFocus (optional): to show data when user focus/click on suggestor box

$('.suggest').suggestor({
    domain: "http://mydomain.com",  // mandatory parameter
    showDataOnFocus :[{
        "displayTextEn": "Java"
    }, {
        "displayTextEn": "PHP"
    }, {
        "displayTextEn": "MySQl"
    }]
});

Author

Mohd Saeed Khan

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

Suggest.js

Demo

Library Support

Browser Support

Dependencies

Getting Started

Features

Data Flow Diagram

Usage

HTML

Call

Data Format

Parameters (Options)

url

category

appId

sourceId

multiSearch

startSearchAfter

maxSuggestions

placeholder

onSelect

showRelatedConcept

whiteListSpecialChar

relatedConceptsCategory

relatedConceptsMaxCounter

grouping

suggestOnClick

trackUserInteraction

getTrackUserInteractionData

showDataOnFocus

Author

Files

README.md

Latest commit

History

README.md

File metadata and controls

Suggest.js

Demo

Library Support

Browser Support

Dependencies

Getting Started

Features

Data Flow Diagram

Usage

HTML

Call

Data Format

Parameters (Options)

url

category

appId

sourceId

multiSearch

startSearchAfter

maxSuggestions

placeholder

onSelect

showRelatedConcept

whiteListSpecialChar

relatedConceptsCategory

relatedConceptsMaxCounter

grouping

suggestOnClick

trackUserInteraction

getTrackUserInteractionData

showDataOnFocus

Author