Implement a predictive search

Problem

Wondering how to implement a searchable text field with linkable results like you can find it on the Appway Support page?

Solution

1 What do you need?

Component Extension
Indexing Extension
Please check the manual for how to configure the Indexing Extension.

2 How to configure the Indexing extension for the Predictive Search example?
When you have read the Indexing Extension's manual you now understand the following configuration values which you have to apply to make this sample work:

1index.2.name = predictive
2index.2.analyzer = org.apache.lucene.analysis.standard.StandardAnalyzer
3index.2.default.max.num.results = 25
4index.2.fields.columns = group   , text    , title   , imagepath, url , id          , content
5index.2.fields.store =   YES     , YES     , YES     , YES      , YES , YES         , NO
6index.2.fields.index =   ANALYZED, ANALYZED, ANALYZED, NO       , NO  , NOT_ANALYZED, ANALYZED
7index.2.search.wildcard.enabled = true
8index.2.optimize.after = 100
9index.2.optimize.on.startup = true
10index.2.startup.clear = false
11index.2.search.consider.id = false
12index.2.acl = false

Code 1: Indexing Extension configuration

3 The demo

When you copy & paste values from this document which contain '{ CONTEXT_PATH }' or '{ VERSION_FILTER }', please remove the whitespaces between the the braces and text.

3.1 Its process

Figure 2: Process 'PredictiveSearch'

The demo consist out of a very easy process. The first screen will let you clear and initialize the index with some simple test data.
The second screen contains the search field which will render the found results.

3.2 The search screen

Figure 3: Search screen

The main component used is the 'Text Field With HTML Suggestions' which is provided by the Compnent Extension. The main configuration options will be described in the following:

URL returning Suggestions as HTML (use RenderRichSuggestFieldSuggestions to create HTML)

Value: '{ CONTEXT_PATH }/script/PredictiveSearch_RenderSearchResults?versionFilter={ VERSION_FILTER }&text='

This parameter defines which Script Function which shall be executed via AJAX. The returned HTML code will be inserted into the current screen and be displayed. The value entered into the text field will be appended automatically to the URL.
In our demo, this Script Function performs the search and renders the search results to HTML. Important: Since every script called via URL is by default protected, this script has to be added to an Access Policy.
Address of Screen showing all results

Value: '{ CONTEXT_PATH }/screen/PredictiveSearch_AllResults?versionFilter={ VERSION_FILTER }&searchtext='

Define the screen which shall be oppened when clicking on 'View all search results'. Again, the search text will be appeneded to this URL and also the refered sceen has to be part of an Access Policy (because of direct call via URL).
Progress Wheel

Value: '{ CONTEXT_PATH }/img/general/waitwheel_small.gif'

Provide an URL to a wait wheel. By default an Appway built-in wait whell is suggested.
Custom CSS

The default 'Text Field With HTML Suggestions' has already some CSS applied. But you may need your own styles. By adding the 'HTML Head Style' below the 'Text Field With HTML Suggestions' you make sure that your custom CSS will be added after the one from the text field. This will enable your styles.

3.3 Test data
To keep this demo small, only three test records were inserted:

1Function PredictiveSearch_InsertTestData() : Nothing Begin
2   IndexData $indexData;
3   //
4   $indexData := new IndexData;
5   $indexData.id := UID();
6   $indexData.group := 'Documents';
7   $indexData.text := 'This is a description text. Could be longer...';
8   $indexData.title := 'Manual 1';
9   $indexData.url := 'http://www.google.com';
10   $indexData.content := 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut';
11   AddToIndex('predictive', $indexData);
12   //
13   $indexData := new IndexData;
14   $indexData.id := UID();
15   $indexData.group := 'Documents';
16   $indexData.text := 'This is a description text. Could be longer...';
17   $indexData.title := 'Manual 2';
18   $indexData.url := 'http://www.google.com';
19   $indexData.content := 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut';
20   AddToIndex('predictive', $indexData);
21   //
22   $indexData := new IndexData;
23   $indexData.id := UID();
24   $indexData.group := 'Downloads';
25   $indexData.text := 'This is a description text. Could be longer...';
26   $indexData.title := 'Download 1';
27   $indexData.url := 'http://www.cnn.com';
28   $indexData.content := 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut';
29   AddToIndex('predictive', $indexData);
30End

Code 2: Test data script

Based on the Indexing Extension configuration the following properties will be searchable:

group
text
title
content

3.4 Sample search
A sample search may look like in the following picture. Here, the string 'man' was used.

Figure 4: Sample search

4 Download the demo
Find the full demo as download on the Appway Support page: http://bit.ly/zVMdYD
PredictiveSearchExample.awexport

Could this article be better?Yes, let me send feedback

Back to Cookbook

Comments (0)

Developer is transitioning to Appway Community

All material for Appway 6 is still available here on developer.appway.com during the transition to Appway Community.

Material for Appway 6.3 and Appway 7 is available in the Knowledge Base on community.appway.com.

Note: The Community Blog, our Forum, and the Support system are available exclusively on Appway Community.

Any questions or feedback? Please contact community@appway.com

Cookbook

Implement a predictive search

How Could This Recipe be Improved?

Developer is transitioning to Appway Community

See Also

COOKBOOK