optimized key up search.

[xren]

I would like to have the following function available on searching. Could you help to find some sample code?

For text field,
when user type in, the ajax will be fired to do a search from database or web service using what ever user typed in as criteria.

The more user types, the shorter the list is. Then user can pick from the list.

For dropdown list as well to let user type down to shorten the list or bring the closet choice to the top.

It will be great if the code can consider the optimization: e.g. search when user pulse. Then no need to let server search every time for each char user typed.

Thank you.
Xiaoli

[Wai]

The JQuery UI library has an autocomplete widget

http://jqueryui.com/autocomplete/

Please view the URL for examples.

In Ebase you can apply the JQuery library onto your form controls.

[Wai]

There are a number of approaches to implement this in Ebase. The first option is very simple and suitable where data sets are small.

Taking the the default example of having a text box:

On our form page, we simply have a coma separated list of items in a field.

For example:

items_list

This field can be set to display none using CSS.
On this field, we add a HTML locater using ID or class (e.g: items)
This becomes the source for our search box.

On our page we also have a text field for searching our items. On this field we add a HTML locator, (e.g: search).

In the HTML++ (head of page) we can add some JQuery to implement the autocomplete on our search text box as per the example in the JQuery documentation:

Code: Select all

<script>
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;

    var itemList = $&#40;'.items'&#41;.val&#40;&#41;;

    $&#40;function&#40;&#41; &#123;
	var availableTags = itemList.split&#40;','&#41;;

        $&#40; ".search" &#41;.autocomplete&#40;&#123;
            source&#58; availableTags
        &#125;&#41;;
    &#125;&#41;;
&#125;&#41;;
</script>

To do this, you will need the JQuery Core, and JQuery UI libraries linked on your form.

[Wai]

The other approach is to use a remote source and use AJAX to call an Ebase published web service. The Ebase published web service takes the search term as a request parameter, it's response is a repeating list of matching items.

There is an example of this approach on our web site:

http://www.ebasetech.com/ufs/ufsmain?fo ... TOCOMPLETE

It includes a demonstration and code sample with explanations.

Hope this helps

[xren]

Thank you Wai.
I will try it out and let you know the result.

Xiaoli

[xren]

Hi Wai,

I was trying the autocomplete following the sample from the Xi UI library.

Step1: add the google's CDN to the ebase_themes template:
<script>
</script>
Step2: created the client script and copied the sample code to it. and add it to Ebase_themes Client scripts.

Step3 & 4: downloaded the jquery-ui-1.9.2.custom.zip, copied the two js files to folder: C:\ebaseXi\UfsServer\tomcat\webapps\ufs\javascript
and the css files to C:\ebaseXi\UfsServer\tomcat\webapps\ufs\css.

Are step 3 and 4 correct? and which files should I include to the presentation template? I did not find .search class in any css file.

Is what I did correct?

Thanks

[Wai]

Hi Xiaoli,

The first thing I would suggest is to use your own presentation template. I think Ebase themes (if the default) already has it's own client libraries and style sheets attached to it.

Or you can just add the libraries to your form.

1. Add JQuery Core library - Form properties - Web Resources - Client Scripts - Click + plus icon, select external client script - put the URL to the google library in the URL path.

2. JQuery UI library
It's recommended that you store your web resources in your own folder rather than ufs/javascript and ufs/css.
For example

ufs/myproject/js
ufs/myproject/css

Step 3 & 4 are correct. But you have to make sure to add these files onto the form or presentation template.

The UI JS file will be added the same way as the Core library above but you just point the URL path to your local JS file.

For the CSS style sheet, you can either place a <link> tag in the html++, or create a stylesheet in Ebase and link it to your local UI stylesheet.

3. HTML Element Locator
You need to add a locator (ID or Class) to the field where you want the autocomplete to occur. For example, you have a search textbox, after you add the field control to your page, have a look at HTML Element Properties. You can assign an ID or a Class to the field. This will allow you to access the field in JQuery and apply the autocomplete.
The example on our website uses:

Class: searchDemo

In JQuery, you can then reference the field using

$(".searchDemo")