Suggest.js (suggestion engine) is robust, flexible, and offers advanced functionalities such as: Fast lookups (Autocomplete) Related Concepts AutoCorrect Recent Searches / Search history Prefetching (Powered by localStorage) Data merging Intelligent caching(URL caching) Personalised Search (Recent Search/User Based)

1. Mohd Saeed Khan (Naukri FED)
suggest.js

2. Agenda
● What is suggest.js ?
● Glimpse of features
● What is Prefetch library ?
● Architecture overview
● How prefetch library update ?
● What is data personalization & it’s use cases.
● Compatiblity matrix and size
● Dependencies
● Current usage
● What next ?

3. Suggest.js (suggestion engine) is robust, flexible, and
offers advanced functionalities such as :
● Fast lookups (Autocomplete)
● Related Concepts
● AutoCorrect
● Recent Searches / Search history
● Prefetching (Powered by localStorage)
● Data merging
● Intelligent caching(URL caching)
● Personalised Search (Recent Search/User Based)
What is ‘suggest.js’?

4. Glimpse of AutoComplete

5. Glimpse of Related Concept

6. Glimpse of AutoCorrect

7. Glimpse of Recent Searches
Will appear automatically on
click or focus inside the
suggestor region
Demo

8. Architecture Overview

9. Q: How prefetch Library works ?
Ans: Prefetched data is fetched and processed on
initialization. If the browser supports localstorage, the
processed data gets cached there, to prevent additional
network requests on subsequent page loads and user query.

10. Resp
Success
Get data against
user query from L.S
e.g. “java”
user wants to
search “java”
Requests same query to
server for “A.C” data
Requests
for version
1
2
12
5
2nd call hits the server for prefetch library
Get Resp. &
Stores
prefetched data
in L.S
if prefetch data
does not exist or
exists with expired
TTL
If response, then stores
version object in L.S
against a version key
Init
Call
Get Response
3
4
6
7
8
9
11
13
14
15
Fail
10

11. How is prefetch library updated…?

12. Update/Merge prefetch
data with response
data object
New Request for prefetch
data
Just chill, &
enjoy with
cached data
TTL
expire
?
Get TTL of
prefetch object
from L.S
Response
Init
Call
21 7
9
8
4
5
6 3
Success
Fail
Yes No
Prefetch library updates on the basis of TTL ?

13. What is data personalization?
Data-Personalization ensures that the data
shown to the user should based on user ID or
recent searches he does.

14. Data Personalization works on the basis of 5 cases

15. A prefetch hit goes to server with blank
parameter values
Keyword Blank
Segments Blank
UNID Blank
Response
e.g. http://suggest.naukri.com/prefetch?&0.44103118497878313&
keywords=&segments=&unid=
&callback=suggestInfoEdge
Case 1(not-Logged In): if user visits first time.
Stores response against
“__infoEdge/prefetch” key

16. A prefetch hit goes to server
with parameter values as
shown in the table.
Keyword JAVA, PHP
Segments @all|1
UNID Blank
Response
e.g.
http://suggest.naukri.com
/prefetch?&0.44103118497878313
&keywords=JAVA,PHP
&segments=@all|1
&unid=
&callback=suggestInfoEdge
Case 2 (not-Logged In): if user searches something and Suggestor gets
Recent Searches from cache.
Get data stored
against prefetch
key from L.S.
Stores Merged
Response against the
same key
1
2
3

17. A prefetch hit goes to server
with parameter values as
shown in the table.
Keyword JAVA, PHP
Segments @all|1
UNID 765497987
Response
e.g.
http://suggest.naukri.com/prefetch?
&0.44103118497878313&
keywords=JAVA,PHP
&segments=@all|1
&unid=765497987
&callback=suggestInfoEdge
Case 3(logged-In): if Recent Searches exist.
1
Stores data against
“infoedge/prefetch/765497987”
key
this response contains
only user specific data
not whole library

18. A prefetch hit goes to server
with parameter values as
shown in the table.
Keyword blank
Segments @all|1
UNID 765497987
Response
e.g.
http://suggest.naukri.com/prefetch?
&0.44103118497878313&
keywords=
&segments=@all|1
&unid=765497987
&callback=suggestInfoEdge
Case 4(logged-In): if Recent Searches does not exist.
1
Stores data against
“infoedge/prefetch/765497987”
key
this response contains
only user specific data
not whole library

19. A prefetch hit goes to server
with parameter values as
shown in the table.
Keyword blank
Segments blank
UNID 765497987
Response
e.g.
http://suggest.naukri.com/prefetch?
&0.44103118497878313&
keywords=
&segments=
&unid=765497987
&callback=suggestInfoEdge
Case 5 (logged-In): if Recent Searches & segments does not
exist.
1
Stores data against
“infoedge/prefetch/765497987”
key
this response contains
whole library

20. Implementation
HTML

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

22. Parameters
● url
autoComplete
relatedConcept
checkVersion
prefetch
● appId
● category
● grouping
● multiSearch
● maxSuggestions
● onSelect
● relatedConceptsCategory
● relatedConceptsLimit
● sourceId
● startSearchAfter
● showRelatedConcept
● suggestOnClick
● trackUserInteraction
● whiteListSpecialChar
● scrollStyle // accepts class name

23. Compatible with jQuery & Zepto
Browser Support
● Internet Explorer 8+
● Chrome 10+
● Firefox 3.5+
● Safari 4+
● Opera 11+
Size
● Production with gziped: 5.50 KB
● Production (minified): 15.38 KB

24. Dependencies
cookie.js : 745 bytes 395 bytes
JSON Error Support : 1.76 KB 1.09 KB
ncCache : 5.79 KB 1.99 KB
Total minified size = suggest.js(15.38KB) + dependencies(9.2KB) = 24.58 KB
Gzip size = suggest.js(5.50 KB) + dependencies(2.84 KB) = 8.34 KB
minified gZipped

25. Current Usage
1) Naukri India
a) HTML5 Mobile Sites
b) Jobseeker (Homepage, SRP, Advanced Search, CJA, Apply, QUP, MNJ, GNB,
Registration)
c) Recruiter Profile
d) FastForward
e) CSM
f) Referral
g) Resdex (Advanced Search, GNB, CV preview)
2) Naukri Gulf
a) Resdex (almost on every page)
It is almost implemented on every page of Naukri Apps

26. What to be next
1. Add custom template support
2. backfilling with remote data. (when number of suggestion insufficient
in prefetch library then an additional call will go to server for
remaining suggestions.)
3. Default suggestions can be shown for empty queries response
4. RTL Support (can be used in Naukri Gulf)

27. Documentation and Demo also available on GilLab
Fork on GitLab