Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

Simple Autocomplete

Huro is integrated with EasyAutocomplete, a nice jQuery automplete library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following shows how it works with a simple result template.


            //JS CODE
            var demoSimpleOptions = {
                url: "assets/data/user.json",
                getValue: "name",
                template: {
                    type: "custom",
                    method: function (value, item) {
                        return `
                            <div class="template-wrapper">
                                <div class="entry-text">
                                    <span>${value}</span>
                                </div>
                            </div>
                        `
                    }
                },
                highlightPhrase: false,
                list: {
                    maxNumberOfElements: 5,
                    showAnimation: {
                        type: "fade", //normal|slide|fade
                        time: 400,
                        callback: function () { }
                    },
                    match: {
                        enabled: true
                    },
                    onChooseEvent: function () {
                        //do your stuff here
                    }
                },
            };
            
            $("#autocomplete-demo-simple").easyAutocomplete(demoSimpleOptions);
            
            //MARKUP
            <div class="field is-autocomplete">
                <div class="control has-icon">
                    <input id="autocomplete-demo-simple" type="text" class="input" placeholder="Search people...">
                    <div class="form-icon">
                        <i data-feather="search"></i>
                    </div>
                </div>
            </div>
            

Subtext Autocomplete

Huro is integrated with EasyAutocomplete, a nice jQuery automplete library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following shows how it works with a subtitle result template.


            //JS CODE
            var demoSubtextOptions = {
                url: "assets/data/user.json",
                getValue: "name",
                template: {
                    type: "custom",
                    method: function (value, item) {
                        return `
                            <div class="template-wrapper">
                                <div class="entry-text">
                                    <span>${value}</span>
                                    <span>${item.location}</span>
                                </div>
                            </div>
                        `
                    }
                },
                highlightPhrase: false,
                list: {
                    maxNumberOfElements: 5,
                    showAnimation: {
                        type: "fade", //normal|slide|fade
                        time: 400,
                        callback: function () { }
                    },
                    match: {
                        enabled: true
                    },
                    onChooseEvent: function () {
                        //do your stuff here
                    }
                },
            };
            
            $("#autocomplete-demo-subtext").easyAutocomplete(demoSubtextOptions);
            
            //MARKUP
            <div class="field is-autocomplete">
                <div class="control has-icon">
                    <input id="autocomplete-demo-subtext" type="text" class="input" placeholder="Search people...">
                    <div class="form-icon">
                        <i data-feather="search"></i>
                    </div>
                </div>
            </div>
            

Advanced Autocomplete

Huro is integrated with EasyAutocomplete, a nice jQuery automplete library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following shows how it works with an advanced result template.


            //JS CODE
            var demoAdvancedOptions = {
                url: "assets/data/user.json",
                getValue: "name",
                template: {
                    type: "custom",
                    method: function (value, item) {
                        return `
                            <div class="template-wrapper">
                                <div class="avatar-wrapper">
                                    <img class="autocpl-avatar" src="${item.pic}">
                                    <img class="avatar-badge" src="${item.badge}">
                                </div>
                                <div class="entry-text">
                                    <span>${value}</span>
                                    <span>${item.location}</span>
                                </div>
                            </div>
                        `
                    }
                },
                highlightPhrase: false,
                list: {
                    maxNumberOfElements: 5,
                    showAnimation: {
                        type: "fade", //normal|slide|fade
                        time: 400,
                        callback: function () { }
                    },
                    match: {
                        enabled: true
                    },
                    onChooseEvent: function () {
                        //do your stuff here
                    }
                },
            };
            
            $("#autocomplete-demo-advanced").easyAutocomplete(demoAdvancedOptions);
            
            //MARKUP
            <div class="field is-autocomplete">
                <div class="control has-icon">
                    <input id="autocomplete-demo-advanced" type="text" class="input" placeholder="Search people...">
                    <div class="form-icon">
                        <i data-feather="search"></i>
                    </div>
                </div>
            </div>