Demo
Features
Contact
Company Website
Blog
Up #1 Example #2 Example #3 Example #4 Example #5 Example Buy NOW

Multi Category/Feature Autocompleter v1.0



Many Features

Over 40 Parameters to Customize

Plug & Play

NO Coding! Customize via 1 Line

Cross Browser

Old - New - Mobile - Desktop Browsers

Intelligent

Smart Retrieve Algorithm with Caching




General Specs

Input Field Size XXL
Keyword Highlight Yes
No. Categories 5
Categories Distribution 3-1-2-1-1
Max Rows 8
Lines Per Row 3
Pre-Load Value v
Show Pre-Load Value NO
Show Headers Yes
AJAX Method GET
List Direction LTR
Label Text Search People, Groups & More!
See More Msg Default
Waiting Msg Default
No Results Msg Default
Timeout Msg Default
Thumbnail Dimension 70x70px
Thumbnail Shape Circle
List Background #f9f9f9
List Font Color #000000
Line2 Color #414141
Line3 Color #666
List Font Size 10pt
List Font Family Tahoma
Headers Background #666666
Headers Color #ffffff
Text Field Border 1px solid #a0a0a0
Text to Photo Margin 80px
Row Top Margin 0px
Marked Row Background #eae0e5
Marked Row Font Color purple
Line2 Marked Color yellow
Info Message Background #eae0e5
Info Message Color #000000
See All

Setup Parameters

muwakaba_autocomplete.build({ contId:"muwakaba_autocomplete1", headers:["People", "Groups", "Pages", "Websites", "Products"], show_headers:1, num_rows_per_category:[3,1,2,1,1], highlight:1, number_lines_per_row:3, label_text:"Search People, Groups & More", text_field_size:"XXL", onRowClick:function(e){get_url(e), get_line1(e), get_line2(e), get_line3(e), get_keyword(e)}, onSearchIconClick:function(e){get_keyword(e)}, direction:"LTR", pre_load_value:"v", show_pre_load_value:0, server_file:"ajax/autocomplete", text_field_border:"1px solid #a0a0a0", thumbnail_dimensions:{width:70, height:70}, text_to_photo_margin:80, row_text_top_margin:0, row_line_height:1.6, thumbnail_shape:"circle", see_more_msg:"See all results of", waiting_msg:"Searching results for", no_results_msg:"No results found for", timeout_msg:"Unable to connect. Please check your internet connection", font_family:"tahoma", font_size:10, list_background:"#f9f9f9", list_font_color:"#000", headers_background:['#666','#666','#666','#666','#666'], headers_color:["#fff","#fff","#fff","#fff","#fff"], mark_background:"#eae0e5", mark_font_color:"purple", line2_mark_color:"yellow", waiting_noresult_background:"#eae0e5", waiting_noresult_color:"purple" )};
See All

General Specs

Input Field Size XL
Keyword Highlight NO
No. Categories 3
Categories Distribution 2-1-2
Max Rows 5
Lines Per Row 2
Pre-Load Value ج
Show Pre-Load Value Yes
Show Headers NO
AJAX Method POST
List Direction RTL
Label Text
ابحث عن أشخاص، صفحات والمزيد!
See More Msg
مشاهدة المزيد من النتائج ل:
Waiting Msg
جاري البحث عن نتائج ل:
No Results Msg
لم نعثر على نتائج ل:
Timeout Msg
لا يوجد اتصال. لطفاً، تأكد من اتصالك بالإنترنت..
Thumbnail Dimension 46x46px
Thumbnail Shape Square
List Background #666
List Color #fff
List Font Size 10pt
List Font Family Tahoma
Text Field Border 1px solid #e7bf4d
Text to Photo Margin 56px
Row Top Margin 0px
Marked Row Background cornsilk
Marked Row Color #000
Info Message Background #666
Info Message Color #fff
See All

Setup Parameters

muwakaba_autocomplete.build({ contId:"muwakaba_autocomplete2", headers:["أشخاص","مجموعات" ,"صفحات"], show_headers:0, num_rows_per_category:[2,1,2], highlight:0, number_lines_per_row:2, label_text:"ابحث عن أشخاص، صفحات والمزيد!", text_field_size:"XL", onRowClick:function(e){get_url(e), get_line1(e), get_line2(e), get_line3(e), get_keyword(e)}, onSearchIconClick:function(e){get_keyword(e)}, direction:"RTL", pre_load_value:"ج", show_pre_load_value:1, server_file:"ajax/autocomplete", text_field_border:"1px solid #e7bf4d", thumbnail_dimensions:{width:46, height:46}, text_to_photo_margin:56, row_text_top_margin:0, row_line_height:1.6, thumbnail_shape:"square", see_more_msg:"
مشاهدة المزيد من النتائج ل:
", waiting_msg:"
جاري البحث عن نتائج ل:
", no_results_msg:"
لم نعثر على نتائج ل:
", timeout_msg:"
لا يوجد اتصال. لطفاً، تأكد من اتصالك بالإنترنت..
", font_family:"tahoma", font_size:10, list_background:"#666", list_font_color:"#fff", mark_background:"cornsilk", mark_font_color:"black", waiting_noresult_background:"#666", waiting_noresult_color:"#fff" });
See All

General Specs

Input Field Size XXXL
Keyword Highlight NO
No. Categories 3
Categories Distribution 2-1-1
Max Rows 4
Lines Per Row 3
Show Headers Yes
AJAX Method POST
List Direction LTR
Label Text Only People, Groups & Pages
See More Msg Let's see more results for:
Waiting Msg Please wait, searching results for:
No Results Msg Sorry :( We can't find results for:
Timeout Msg Unable to reach server, please try again
Thumbnail Dimension 85x85px
Thumbnail Shape Square
List Background #fff
List Font Color #3b5889
Line2 Color #666
Line3 Color #666
List Font Size 12pt
List Font Family Consolas
Headers Background #e8e8e8
Headers Color #666
Text Field Border 1px solid #3b5889
Text to Photo Margin 100px
Row Top Margin 3px
Marked Row Background #eae0e5
Marked Row Font Color #fff
Line2 Marked Color gold
Line3 Marked Color #f0f0f0
Info Message Background #3b5889
Info Message Font Color #fff
See All

Setup Parameters

muwakaba_autocomplete.build({ contId:"muwakaba_autocomplete3", headers:["People", "Groups", "Pages"], show_headers:1, num_rows_per_category:[2,1,1], highlight:0, number_lines_per_row:3, label_text:"Only People, Groups & Pages", text_field_size:"XXXL", onRowClick:function(e){get_url(e), get_line1(e), get_line2(e), get_line3(e), get_keyword(e)}, onSearchIconClick:function(e){get_keyword(e)}, direction:"LTR", server_file:"ajax/autocomplete", text_field_border:"1px solid #3b5889", thumbnail_dimensions:{width:85, height:85}, text_to_photo_margin:100, row_text_top_margin:3, row_line_height:1.6, thumbnail_shape:"square", see_more_msg:"Let's see more results for:", waiting_msg:"Please wait, searching results for:", no_results_msg:"Sorry :( We can't find results for:", timeout_msg:"Unable to reach server, please try again", font_family:"consolas", font_size:12, list_background:"#fff", list_font_color:"#3b5889", line2_color:"#666", line3_color:"#666", headers_background:['#e8e8e8','#e8e8e8','#e8e8e8'], headers_color:["#666","#666","#666"], mark_background:"#3b5889", mark_font_color:"#fff", line2_mark_color:"gold", line3_mark_color:"#f0f0f0", waiting_noresult_background:"#3b5889", waiting_noresult_color:"#fff" });
See All

General Specs

Input Field Size L
Keyword Highlight Yes
No. Categories 2
Categories Distribution 3-0-2-0-0
Max Rows 5
Lines Per Row 2
Show Headers Yes
AJAX Method GET
List Direction LTR
Label Text Only People & Pages
See More Msg Find more matches for:
Waiting Msg Searching matches for:
No Results Msg Unable to find matches for:
Timeout Msg Service is unreachable, please try again
Thumbnail Dimension 44x44px
Thumbnail Shape Circle
List Background #e0e0e0
List Font Color black
Line2 Color #666
List Font Size 10pt
List Font Family Helvetica
Headers Background #c95489 & #3b5889
Headers Color #fff
Text Field Border 1px solid #c95489
Text to Photo Margin 54px
Row Top Margin -1px
Marked Row Background #fefae1
Marked Row Font Color #c87201
Info Message Background #c95489
Info Message Font Color #fff
See All
Setup Parameters
muwakaba_autocomplete.build({ contId:"muwakaba_autocomplete4", headers:["People","","Pages","", ""], show_headers:1, num_rows_per_category:[3,0,2,0,0], highlight:1, number_lines_per_row:2, label_text:"Only People & Pages", text_field_size:"L", onRowClick:function(e){get_url(e), get_line1(e), get_line2(e), get_line3(e), get_keyword(e)}, onSearchIconClick:function(e){get_keyword(e)}, direction:"LTR", server_file:"ajax/autocomplete", text_field_border:"1px solid #c95489", thumbnail_dimensions:{width:44, height:44}, text_to_photo_margin:54, row_text_top_margin:-1, row_line_height:1.6, thumbnail_shape:"circle", see_more_msg:"Find more matches for:", waiting_msg:"Searching matches for:", no_results_msg:"Unable to find matches for:", timeout_msg:"Service is unreachable, please try again", font_family:"helvetica", font_size:10, list_background:"#e0e0e0", list_font_color:"black", line2_color:"#666", headers_background:["#c95489","","#3b5589","",""], headers_color:["#fff","","#fff","",""], mark_background:"#fefae1", mark_font_color:"#c87201", waiting_noresult_background:"#c95489", waiting_noresult_color:"#fff" });
See All

General Specs

Input Field Size M
Keyword Highlight NO
No. Categories 1
Categories Distribution 0-4-0-0-0
Max Rows 4
Lines Per Row 1
Show Headers NO
AJAX Method POST
List Direction LTR
Label Text Only Groups
See More Msg Find more results for:
Waiting Msg Searching results for:
No Results Msg No results found for:
Timeout Msg Seems your connection is off, please check your connection
Thumbnail Dimension 30x30px
Thumbnail Shape Square
List Background green
List Font Color white
List Font Size 10.5pt
List Font Family Calibri
Text Field Border 1px solid green
Text to Photo Margin 40px
Row Top Margin 6px
Marked Row Background gold
Marked Row Font Color brown
Info Message Background green
Info Message Font Color #fff
See All
Setup Parameters
muwakaba_autocomplete.build({ contId:"muwakaba_autocomplete5", headers:["","Groups","","", ""], show_headers:0, num_rows_per_category:[0,4,0,0,0], highlight:0, number_lines_per_row:1, label_text:"Only Groups", text_field_size:"M", onRowClick:function(e){get_url(e), get_line1(e), get_line2(e), get_line3(e), get_keyword(e)}, onSearchIconClick:function(e){get_keyword(e)}, direction:"LTR", server_file:"ajax/autocomplete", text_field_border:"1px solid green", thumbnail_dimensions:{width:30, height:30}, text_to_photo_margin:40, row_text_top_margin:6, row_line_height:1.6, thumbnail_shape:"square", see_more_msg:"Find more results for:", waiting_msg:"Searching results for:", no_results_msg:"No results found for:", timeout_msg:"Seems your connection is off, please check your connection", font_family:"calibri", font_size:10.5, list_background:"green", list_font_color:"white", mark_background:"gold", mark_font_color:"brown", waiting_noresult_background:"green", waiting_noresult_color:"white" });
See All

General Specs

Input Field Size S
Keyword Highlight Yes
No. Categories 5
Categories Distribution 2-1-1-1-1
Max Rows 6
Lines Per Row 1
Show Headers NO
AJAX Method GET
List Direction LTR
Label Text Explore Everything
See More Msg Find all results for:
Waiting Msg Fetching results for:
No Results Msg Nothing matched the keyword:
Timeout Msg Service is unreachable, please check your connection
Thumbnail Dimension 0x0px
List Background white
List Font Color black
List Font Size 10pt
List Font Family Calibri
Text Field Border 1px solid #cc0000
Text to Photo Margin 7px
Row Top Margin 0px
Marked Row Background #cc0000
Marked Row Font Color white
Info Message Background #cc0000
Info Message Font Color #fff
See All
Setup Parameters
muwakaba_autocomplete.build({ contId:"muwakaba_autocomplete6", headers:["People","Groups","Pages","Websites", "Products"], show_headers:0, num_rows_per_category:[2,1,1,1,1], highlight:1, number_lines_per_row:1, label_text:"Explore Everything", text_field_size:"S", onRowClick:function(e){get_url(e), get_line1(e), get_line2(e), get_line3(e), get_keyword(e)}, onSearchIconClick:function(e){get_keyword(e)}, direction:"LTR", server_file:"ajax/autocomplete", text_field_border:"1px solid #cc0000", thumbnail_dimensions:{width:0, height:0}, text_to_photo_margin:7, row_text_top_margin:0, row_line_height:1.6, see_more_msg:"Find all results for:", waiting_msg:"Fetching results for:", no_results_msg:"Nothing matched the keyword:", timeout_msg:"Service is unreachable, please check your connection", font_family:"calibri", font_size:10, list_background:"white", list_font_color:"black", mark_background:"#cc0000", mark_font_color:"white", waiting_noresult_background:"#cc0000", waiting_noresult_color:"white" });
See All




Features




  • No need to write any code, customize parameters from only one single line to build the Autocompleter as you wish
  • Easy installation in 1 second, you need only to create a container in HTML & point to it from the Build function
  • Very smart algorithm to retrieve records and keep the total number of records fixed by adding extra records to other categories when shortage happens in one or more categories
  • Caching for the retrieved records to save the server performance
  • Cross Browser, works on all mobile/desktop, old/new browsers. Works on IE7 too
  • Control the number of categories and the minimum number of records per each category
  • Control the number of lines per each category in the list
  • Control the direction of the list to suite the LTR & RTL languages
  • Control the thumbnail dimensions with the ability to build the list without thumbnails
  • Keyboard and mouse support; move between records using the keyboard keys (Keyup and Keydown) and the mouse & select records via mouse and keyboard (ENTER key)
  • Two built-in functions to take action when selecting a row inside the list or clicking on the search icon which is next to the input field
  • Customize your own info/error messages like the waiting, "see more results", "no results found" & timeout messages
  • Built-in 6-sizes input field (small, medium, large, X large, XX large, XXX large) with auto text direction change for RTL and LTR languages
  • Unlimited styling - you can customize everything from the Build function, like the list background color, list font color, categories headers backgrounds and font colors, lines colors, marked row colors, font size, font family, row top margin, text to photo margin, input field size, etc.
  • Provides error/timeout handling due to server or internet connection
  • Very elegant and modern design




Contact Us
We'd be very happy to hear from you!







Muwakaba @ 2024