Live keyword suggestions

Infradox XS can be configured to display “live” word suggestions as the user starts typing in the search input boxes.

This function can use different sources and it can suggest galleries as well. One of the data sources is the table with unique words that are extracted from your metadata. The article Unique words processing explains how extracting unique words for tag lists and suggestions works, and how you can change how it functions. Also read the article about Tag clouds for further information.

Recommended reading

• Unique words processing
• HTML for ‘no search results’
• Data processing rules

Configuration

Go to Site configuration, Search settings and then open the section Suggestions.

You can choose from the following options:

• Don’t display suggestions
  Choose this option to completely disable the function. Note that you may also enable the function while allowing users to switch it off themselves.
• From extracted keywords
  When you upload a new file or when you change the data of a file already in the database, unique words are extracted from the keywords field (and/or other fields) and these words are stored in a database table with references to the files in which the word appears. This table is used to retrieve suggested words when you choose this option. You can also display suggestions from both the keywords that are extracted for this purpose and from other tag lists. For more information about extracting tags, please read the article about this subject (in the links at the top).
• Custom database function
  This option should be selected only if you have contracted us to develop a special function for you.
• From plain text file
  If you want more control and you have a relatively small list of suggestions, then you can upload a simple text file. This will then be used instead. It’s recommended to run a test with a small file first. Also see below for information about uploading text files.From text file synonyms.txt
• Reserved for a future version. Currently not available.
• From vocabulary
  Reserved for a future version. Currently not available.
• No keyword suggestions.
  If you want to suggest gallery names only (galleries can be events, portfolio’s, photo stories and so on), then choose this option and make sure that you check the box Include suggestions for galleries too.

Including suggestions for galleries

• If you check this option, then the suggestions box will display both keywords and gallery names.
  It’s also possible to suggest gallery names only as described above.

Uploading suggestion text files

• To upload a plain text file, go to Site configuration, Website files and click Show options underneath Suggestion text files.
  The file that you upload must have the file name suggestions.txt – each word in the file should appear pn its own line, don’t use commas.
• The list of keyword suggestions is cached on the server. If you upload a new version you must click the link to clear the server cache. You’ll find this link in the section where you can upload the suggestions.txt file.

Soundex

• Enable the Soundex option to include words that are phonetically similar to the word that the user enters.
  Examples of words that the Soundex function may return are hair and hare.

Word matching

You can choose any of the following options to change which words will be included in the suggestions.

• Exact
  Only words that exactly match what the user types will be included in the suggestions. Note that suggestions are always case insensitive. Keywords must be comma separated. If the keywords of a photo contain red hair, woman, young then three different keywords are extracted with red hear being treated as a single compound keyword. If matching is set to Exact and one types hair, both hair and red hair may be displayed as suggestions. Hairy however will not be part of the suggestions.
• Containing
  With this option enabled, all words are returned that are a partial match. To stay with the above example, suggestions for hair will include hair, red hair and hairy. But also chair.
• Exact and starts with
  This returns all words that would be returned with the option Exact described above, and also words that start with what the user types. Using our example again, suggestions for hair will not include chair but it will include hairy.
• Exact and ends with
  As above but words are returned only if an exact match is found or if words end with the word that is typed. E.g. for hair the word chair will be included, the word hairy will not.

Word conversion

• You can change how suggested words are displayed, i.e. you can display the words as they are extracted and stored or you can convert the words to uppercase, lowercase or capitalized.

Letting users choose whether they want suggestions or not

• Choose the setting Display checkbox to enable end users to enable or disable suggestions. The setting is stored in the user’s cookies so it will remain on or off.

Suggestions for the quick search function and for the advanced search function

• If the user clicks a word that appears as a suggestion when typing in the quick search box, a search will execute immediately.
• If the user clicks a word that appears as a suggestion when typing in one of the advanced search input boxes, then that word is copied to the input field, but a search doesn’t immediately start. This allows the user to create a Boolean search using more words and And, Or, Not.

Phrase searching

If a search suggestion is a “compound word”, e.g. Blue Whale – then you can have a search using this suggestion executed as a Phrase search. This means that the words need to exist next to each other in the metadata of files. A phrase search for Blue Whale will not return an image that has “Whale swimming in blue water”.  It will find an image that has “Blue whale swimming in blue water”. Note that your full text index must have been configured for phrase searches, so do check with support before enabling this function.

Customising the suggestion function

You can change the look of the suggestions box by applying your own CSS. If you want more control, e.g. to change where the suggestion box appears, then you can create custom Script. You may want to first read the articles Infradox XS customisation, Using the code editor, Using Javascript in your pages.

Open the code editor in Back office. In the template dropdown at the top, select “Client script”. If there’s already script in there, then scroll to the bottom. You can also load a default skeleton first.

The actual functionality for loading data for suggestions et cetera is in the Infradox script library. By adding the code below, you can override the init and the displaybox functions. The first one is called upon page load and it is used to initialise the input control(s) to which you want to connect the suggestions function. The second function (displaybox) is called when data is loaded and ready to displayed. Note that if you decide to add xssuggestions to your custom script, then the object must have both methods. You can add a third function to override the default behaviour when a suggestion is clicked. This function is optional and its name is onclicked.

var xssuggestions = { // object name must be xssuggestions
    init: function() {
        var ixs=infradoxsuggest; // infradoxsuggest is the object in Infradox script library
        ixs.sbindkeys($("#quicksearchtext")); // bind the keys to the input box, here it is an input with id quicksearchtext
        // you can add additional input elements using the call above
        return true;
    },
    displaybox: function(el) { // el is the input element that triggered the suggestions 
        var ixs=infradoxsuggest;
        if(!ixs._box.is(":visible")) { // if not already showing
	     ixs._box.css({width:el.width()+"px"}) // show it
                .show()
                .position({of:el,my:"left top-1",at:"left-1 bottom"}); // position the box with suggestions where you want it to appear
        }
    },
    onclick: function(inp,li) { // onclick is optional, inp is the input element, li is the clicked list item 
        alert( li.find("a").attr("href") ); // as an example, this alerts the url - you'll need to handle the rest yourself in this function
    }
};