Auto-complete text field

Auto-complete text field

Adding an auto-complete dropdown of pre-defined suggestions, whenever typing in a text box. An example would be showing a list of Brisbane suburbs beginning with "C" when typing "C" into the text box.

Wireframe

Coding Instructions

Step 1. Download the JS files:

Download the following JS files to make the "Typeahead" auto-complete function work:

Create a new folder called httpdocs/assets/themes/redesign/plugins/typeahead/js and copy the above JS files into it.

Open footers/template.html, and paste the below lines directly after the other JS include files (it MUST be placed lower than jquery.min.js):

<script type="text/javascript" src="/assets/themes/redesign/plugins/typeahead/js/bloodhound.min.js"></script>
<script type="text/javascript" src="/assets/themes/redesign/plugins/typeahead/js/typeahead.bundle.min.js"></script>

Step 3. Add the HTML

Add the following HTML into whichever form will be using the auto-complete function. In this example, it will be added to the checkout field, so the correct name and id attributes are applied to the input.

Note the input that the function is being applied to must have the class "typeahead" in order to be targeted correctly using the Jquery function.

<div id="city-state" class="form-group">
    <label class="control-label col-xs-12 col-sm-4" for="cusref1">
        City/State
    </label>
    <div class="col-xs-12 col-sm-8">
        <input class="typeahead form-control" type="text" name="cusref1" id="cusref1" placeholder="City/State">
    </div>
</div>

Step 4. Add the JS

Add the following JS code to the top of the page where the function is being used.

Update the states array to include the new information included as part of the dropdown for the auto-complete function. The following example is using New Zealand states:

[%SITE_VALUE id:'footer_javascript'%]
    <script type="text/javascript" language="javascript">
    //Typeahead Autosuggest Function
    var substringMatcher = function(strs) {
        return function findMatches(q, cb) {
            var matches, substringRegex;
            // an array that will be populated with substring matches
            matches = [];
            // regex used to determine if a string contains the substring `q`
            substrRegex = new RegExp(q, 'i');
            // iterate through the pool of strings and for any string that
            // contains the substring `q`, add it to the `matches` array
            $.each(strs, function(i, str) {
                if (substrRegex.test(str)) {
                    matches.push(str);
                }
            });
            cb(matches);
        };
    };
    var states = ['Akaroa', 'Albany', 'Alexandra', 'Algies Bay', 'Allanton', 'Amberley', 'Apiti', 'Arapuni', 'Aria', 'Arrowtown', 'Ashburton', 'Ashhurst', 'Atiamuri', 'Auckland', 'Awanui', 'Balclutha', 'Balfour', 'Belfast', 'Blackball', 'Blenheim', 'Bluff', 'Bombay', 'Brighton', 'Brightwater', 'Broadwood', 'Bulls', 'Burnham', 'Cable Bay', 'Cambridge', 'Carterton', 'Cave', 'Chatham Island', 'Cheviot', 'Christchurch', 'Clarks Beach', 'Clinton', 'Clive', 'Clyde', 'Coalgate', 'Collingwood', 'Conroys Gully', 'Coopers Beach', 'Coromandel', 'Cromwell', 'Culverden', 'Dannevirke', 'Darfield', 'Dargaville', 'Diamond Harbour', 'Dipton', 'Dobson', 'Drury', 'Dunedin', 'Eastbourne', 'Edendale', 'Edgecumbe', 'Eketahuna', 'Eltham', 'Ettrick', 'Fairlie', 'Featherston', 'Featherston South', 'Feilding', 'Foxton', 'French Pass', 'Geraldine', 'Gisborne', 'Glenorchy', 'Glentunnel', 'Gore', 'Granity', 'Great Barrier Island', 'Greta Valley', 'Greymouth', 'Greytown', 'Hamilton', 'Hampden', 'Hanmer Springs', 'Harihari', 'Haruru', 'Hastings', 'Haumoana', 'Havelock', 'Havelock North', 'Hawarden', 'Hawera', 'Hawkes Bay', 'Hector', 'Helensville', 'Henderson', 'Hikuai', 'Hikurangi', 'Hillside South Wairarapa District', 'Hokitika', 'Hororata', 'Howick', 'Hunterville', 'Huntly', 'Inglewood', 'Invercargill', 'Island', 'Johnsonville', 'Kaeo', 'Kaiapoi', 'Kaikohe', 'Kaikoura', 'Kaitaia', 'Kaitangata', 'Kaiwaka', 'Kamo', 'Karamea', 'Karori', 'Katikati', 'Kaukapakapa', 'Kawakawa', 'Kawerau', 'Kawhia', 'Kerikeri', 'Kimbolton', 'Kohukohu', 'Kotemaori', 'Kumara', 'Kumeu', 'Kurow', 'Landsdown', 'Lawrence', 'Leeston', 'Levin', 'Lincoln', 'Little River', 'Lower Hutt', 'Lumsden', 'Lyttelton', 'Mahoenui', 'Mamaku', 'Manaia', 'Mangakino', 'Mangantainoka', 'Mangaweka', 'Mangawhai', 'Mangonui', 'Manukau', 'Manurewa', 'Manutuke', 'Mapua', 'Maramarua', 'Martinborough', 'Marton', 'Masterton', 'Matakohe', 'Matamata', 'Mataura', 'Matawai', 'Matiere', 'Maungaturoto', 'Mercer', 'Methven', 'Middlemarch', 'Millers Flat', 'Milton', 'Moerewa', 'Mokau', 'Morrinsville', 'Mosgiel', 'Motueka', 'Mount Maunganui', 'Murchison', 'Murupara', 'Napier', 'Nelson', 'New Lynn', 'New Plymouth', 'Ngaruawahia', 'Ngatea', 'Ngongotaha Valley', 'Nightcaps', 'Norsewood', 'North Putaruru', 'North Shore City', 'Northland', 'Nuhaka', 'Oakura', 'Oamaru', 'Ohai', 'Ohakune', 'Ohau', 'Ohaupo', 'Ohinewai', 'Ohope', 'Ohura', 'Okaihau', 'Okato', 'Omakau', 'Omokoroa', 'Onerahi', 'Ongaonga', 'Ongarue', 'Oparau', 'Opotiki', 'Opua', 'Opunake', 'Orewa', 'Otago', 'Otaki', 'Otaki Beach', 'Otane', 'Otautau', 'Otematata', 'Otorohanga', 'Oturehua', 'Oturehura', 'Outram', 'Owaka', 'Owhango', 'Oxford', 'Paekakariki', 'Paeroa', 'Pahiatua', 'Paihia', 'Palmerston', 'Palmerston North', 'Palmerston Nth', 'Papakura', 'Papamoa', 'Paparoa', 'Paraparaumu', 'Pareora', 'Patea', 'Peel Forest', 'Pegasus', 'Picton', 'Piopio', 'Pirongia', 'Pleasant Point', 'Pokeno', 'Pongaroa', 'Porangahau', 'Porirua', 'Port Chalmers', 'Poukawa', 'Poverty Bay', 'Prebbleton', 'Pukeatua', 'Pukekohe', 'Pukerua Bay', 'Putaruru', 'Queenstown', 'Raetihi', 'Raglan', 'Rai Valley', 'Rakaia', 'Ranfurly', 'Rangiora', 'Raupunga', 'Red Beach', 'Reefton', 'Renwick', 'Reporoa', 'Rewa', 'Riverhead', 'Riverlands', 'Riverton', 'Rolleston', 'Ross', 'Rotherham', 'Rotokauri', 'Rotorua', 'Roxburgh', 'Ruakaka', 'Ruatoria', 'Ruawai', 'Runanga', 'Russell', 'Sanson', 'Seaview', 'Seddon', 'Shannon', 'Sheffield', 'Silverdale', 'Southbridge', 'Spring Creek', 'Springfield', 'Springston', 'St Andrews', 'Stratford', 'Taihape', 'Taipa', 'Tairua', 'Takaka', 'Takanini', 'Takapau', 'Taneatua', 'Tangimoana', 'Tangiteroria', 'Tapanui', 'Taranaki', 'Tarras', 'Taumarunui', 'Taupiri', 'Taupo', 'Tauranga', 'Te Anau', 'Te Aroha', 'Te Awamutu', 'Te Awanga', 'Te Karaka', 'Te Kauwhata', 'Te Kopuru', 'Te Kuiti', 'Te Mata', 'Te Puke', 'Temuka', 'Thames', 'Tikitiki', 'Timaru', 'Tinui', 'Tirau', 'Tokanui', 'Tokomaru Bay', 'Tokoroa', 'Tolaga Bay', 'Tongariro', 'Totaranui', 'Tuakau', 'Tuatapere', 'Turangi', 'Turitea', 'Tuturau', 'Twizel', 'Upper Hutt', 'Upper Moutere', 'Upper Plain', 'Urenui', 'via Nelson', 'Waddington', 'Waharoa', 'Waiau', 'Waiheke Island', 'Waihi', 'Waihi Beach', 'Waikaia', 'Waikanae', 'Waikari', 'Waikato', 'Waikouaiti', 'Waikuku Beach', 'Waimana', 'Waimate', 'Waimauku', 'Waimiha', 'Wainuiomata', 'Waiotira', 'Waiouru', 'Waipawa', 'Waipu', 'Waipukurau', 'Wairarapa', 'Wairoa', 'Waitakere', 'Waitara', 'Waitati', 'Waitoa', 'Waiuku', 'Wakefield', 'Wallacetown', 'Walton', 'Wanaka', 'Wanganui', 'Warkworth', 'Waverley', 'Wellington', 'Wellsford', 'Westland', 'Westport', 'Whakatane', 'Whangamata', 'Whangaparaoa', 'Whangarei', 'Whataroa', 'Whiritoa', 'Whitianga', 'Winton', 'Woodend', 'Woodville', 'Wyndham'
    ];
    $('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'states',
        source: substringMatcher(states)
    });
    </script>
[%/SITE_VALUE%]

Was this article useful?

Be notified when this page is updated. Optional.