 |
|
|
AutoComplete is a paid-account option from PicoSearch that is a great
professional-looking feature for any website search. Sometimes called
auto-suggestions, AutoComplete is the drop-down box that offers to
complete user queries as they type in their search. These suggested
completions of partially typed words will not only save the user time by
selecting them quickly from the list, but they also will steer the user
toward guaranteed important matches from the website.
PicoSearch has two ways to generate the search suggestions for
AutoComplete. First, there is an automatic phrase mining process that
runs after every new indexing which updates the search engine. This
automatically builds the site phrases dictionary. Second, you can
control your own additional suggested phrases.
Automatically building the Site Phrases Dictionary
This site phrase dictionary is always built for paid accounts, so that
if/when you choose to turn on the AutoComplete feature then the
dictionary is ready to use. The dictionary building will run as soon as
possible on a first-come first-served basis after each time your index
is updated (usually this will be pretty quick, so things stay in sync).
This site phrases dictionary can be tested from the account manager
interactively, and any suggestions you don't like can be Excluded
interactively. Excluding can be done by hitting the Exclude button next
to the phrase you are typing, or click the symbol for banning the
suggestion in the drop down list (it turns red then removes the
suggestion and adds it to the Excluded box above).
When you use the interactive test entry in the account manager, you will
see all the matching suggestions as you type a search. The user however
will only see as many as specified in the setting for Show up to __
suggestions. Under this option is the date of your last automatic site
phrase dictionary build, which you can check after indexing to verify
when the newest AutoComplete suggestions could be available to your
users. They are only seen by users if the next option is on to show the
automatically generated suggestions from the site phrases dictionary.
Or if you need to automatically exclude all phrases that contain a
certain word, this can be done with the Stopwords list. For example, if
you have the word "table" on your site, but you only sell chairs, you
can list "table" as a stopword so any mention of table on the site
doesn't go into an autocomplete suggeston for a user search.
Lastly, the URLs of your website from which suggestions are mined can be
Excluded by whole URLs or patterns with wildcards. Thus, the automtic
mining process is quite controllable and can be managed with
considerable accuracy.
Controlling Additional Phrases
The other method by which PicoSearch generates suggestions is from your
own Additional Phrases. In your account manager, Additional Phrases can
be typed directly into the entry box for them, or added as you are
testing searches by the interactive interface. While the automatically
generated phrases are shown in the order of matching and importance by a
formula, Additional Phrases offer the benefit of controllable order of
display. You can type a number in front of any Additional Phrases that
trigger together, and they will be sorted in that order. You can type
this number before the suggestion only if you hit the option to Show
additional phrase weights, otherwise a number will be interpreted as
part of the suggestion itself. By default, all Additional Phrases have
weight of 1, which becomes visible if you hit Show option and there were
some phrases already entered without any explicit weights.
While new site phrases from the automatically constructed dictionary
require index building before becoming suggested, your hand-entered
Additional Phrases will be shown to users immediately for matching
searches after you type them.
Adding AutoComplete to your Web Pages
Once the AutoComplete feature is turned on, the suggestions list will be
available in the search results pages that come from PicoSearch. But in
order to add the feature to your own site search box on your pages, you
must follow the instructions to add two important things to the HTML.
One is a javascript file include which works best at the end of your
file, the other is the class on the input box for
PicoSearchAutoComplete. Instructions to do this are in the account
manager's AutoComplete section, and also get included with the general
purpose "How to Add a Search Box" instructions which give the complete
cut-and-paste code for search box pasting.
Optionally Controlling the Suggestions Box Appearance
The default appearance of the suggestions box for AutoComplete is a
simple white box with lines of text that match the width of the input
box. This could change if you have CSS classes on surrounding HTML
elements which get inherited down, in which case you may want to
override. Or you may just wish to customize the suggestions box all by
itself.
There are two techniques for controlling the suggestions box appearance.
The first is by setting its own CSS class, which is called
PicoSearchAutoComplete. For example, if you set all text to be
underlined within table columns, then the table column with the
suggestions box will pass underlining on to the suggestions too. You
could then override this with the PicoSearchAutoComplete class to get
the suggestons back to the non-underlined state. This could be used in
any web page of your site that has a search box, or in your PicoSearch
search results template.
td {text-decoration:underline}
td.PicoSearchAutoComplete {text-decoration:none}
The other technique for customizing the suggestions box, is by a
handfull of pre-determined hidden argument values that control some key
features, including the width behavior which you could not control
otherwise. You can add any of the following hidden arguments to any
search box on your page. These lines must be added within the scope of
each PicoSearch search box form, that is between the starting <form ...> and ending </form>, so near your account number input is a good place, that is near the <input type="hidden" name="index" value="######" />
Note that in order to add these hidden arguments to the search box of
your search results page, you'll need to follow the instructions for
turning off the default box and replacing it with your own code in your
Template, to which you can then add the hidden arguments. See the FAQ on Customizing the Search Box.
- To set the font of the suggestions to 12pt Arial for example:
<input type="hidden" name="autocomplete-font" value="12pt Arial">
Note that what is happening here is the CSS font property is being set,
which is really a shorthand for setting up to 4 properties with 2
required. The order is important too, so in order they are: font-weight
(optional), font-size (required), line-height (optional), and
font-family (required). The list is space separated, with a / connecting
font-size and line-height if line-height is present. Then the list can
have comma-separated additional font-family names for fallback if one
isn't loaded by the browser.
So for a full example, to set the font of the suggestions to bold 12pt
Arial with 20pt line-height and Helvetica, Times, and serif fonts for
backup:
<input type="hidden" name="autocomplete-font" value="bold 12pt/20pt Arial, Helvetica, Times, serif">
- To set the color of the suggestions border to red for example:
<input type="hidden" name="autocomplete-border-color" value="red">
- To set the background color of the suggestions to yellow for example:
<input type="hidden" name="autocomplete-unselected-background-color" value="yellow">
- To set the color of the suggestions phrases to blue for example:
<input type="hidden" name="autocomplete-unselected-text-color" value="blue">
- To set the background color of the highlighted (selected) suggestions to orange for example:
<input type="hidden" name="autocomplete-selected-background-color" value="orange">
- To set the color of the highlighted (selected) suggestions to purple for example:
<input type="hidden" name="autocomplete-selected-text-color" value="purple">
- To set the width of the suggestions menu to the longest
suggestion (normally it matches the query box and wraps long
suggestions):
<input type="hidden" name="autocomplete-dynamic-menu-width" value="1">
|
|
 |
|
|
