[CLOSED] autocomplete textbox

How to implement auto complete function in WebFOCUS??
I have a textbox in my UI, and it should be sutopopulated with values from the table according to the values I enter.
Suppose my textbox is for fruits - when I type in B, suggestions should be provided from the table for fruits containing the letter 'B'.
Just like what is done in google.

Have anyone tried implementing this using Ajax or javascript or anyother method??

This message has been edited. Last edited by: Kerry,

WF: 7.6.8
OS/Platform: Windows, Unix

Posts: 55 | Registered: May 25, 2010

<JJI>

posted

Hi Neez,

Maybe this js code snippet will give you what you need?

   <script language="JavaScript">
//------------------------------------------------------------------------------
// Search function for Profit Center and Account Nr
//------------------------------------------------------------------------------
function AccComplete (field, select, property, forcematch)
{
prevlength=0;
//  alert(prevlength);
//  alert(field.value.length);
  if (prevlength > field.value.length) { j=0; }
  else {
    if (field.value.length > 1) {
      j=select.selectedIndex;
    }
    else {
     j = 0;
    }
  }
   var found = false;
  for (var i = j; i < select.options.length; i++) {
    if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
                                found=true; break;
    }
  }
  if (found) { select.selectedIndex = i;
             j=select.selectedIndex; }
//  else { select.selectedIndex = -1; }
  prevlength = field.value.length;
}
</script>

We use this to search in a long listbox.
ex:

<html>
...
<form>
        <tr>
        <td width="117" align="center" bgcolor="#D4D4D4" height="25"><b> </b><b>Select Prof.Cent.
        </b></td>
        <td><input type='text' name='prfsel' ONKEYUP=
                "AccComplete(prfsel,PRFCENT,'value',true)">
          </td>
        </tr>
        <tr>
        <td width="117" align="center" bgcolor="#D4D4D4" height="25"><b> </b>
          <b>Profit Center</b> </td>
        <td width="141" bgcolor="#D4D4D4" height="25"> <b><font face="Verdana" size="1">
          <select name="PRFCENT" size="3" multiple>
                                 !IBI.FIL.PRFCLST;
          </select>
          </font> </b></td>
        </tr>
</form> 
...
</html>

Hope this works for you,

<JJI>

posted

I also found this on the forum.
I'm sure if you look around a bit on this forum you'll find some threads about this subject.
Kind regards,

Waz

Expert

posted

Hide Post

Be Cautious, as using ajax to get a subset from a table means that each time you type a letter, a request is sent to the server.

Imagine if you have 100 people using this page. You could have hundreds of calls hitting the server.

Is this an acceptible load ?

Waz...

Prod:	WebFOCUS 7.6.10/8.1.04	Upgrade:	WebFOCUS 8.2.07	OS:	Linux	Outputs:	HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006

Ignored post by Waz posted

Show Post

Ram Prasad E

Master

posted

Hide Post

If your source records are less in number, say less than 5000 elements. Then I would suggest to bring all the records and keep it in a hidden element(list box). When user hit any key, search against this hidden list box.
Make sure the records are not sensitive, meaning any user can view all the records. Since its kept in hidden element. Users can see all the record elements via view-> source.

WebFOCUS 8.1.05
Windows
http://ibiwebfocus.wordpress.com
https://www.facebook.com/groups/ibi.webfocus/

Posts: 542 | Location: Dearborn, MI | Registered: June 03, 2009

Ignored post by Ram Prasad E posted

Show Post

Neenz

Gold member

posted

Hide Post

Thanks every one for your inputs..
This is how I implemented it. Might not be the best solution but I get the results in less than a second.

* included protojype.js, controls.js and effects.js

on page load
* Ran the focexec to return dist value (returns nearly 7000 records)
* Load them to an array

on key up of text box
* autocompleter to populate hidden DIV is called, and gets the value from the array.

WF: 7.6.8
OS/Platform: Windows, Unix

Posts: 55 | Registered: May 25, 2010

Ignored post by Neenz posted

Show Post

<JJI>

posted

Neenz,

Would you be so kind to share your code?

Thanks

Member

posted

Hide Post

Hi Dirk,

Could you please explain in an example. I am new to webfocus. It would be much appreciated if you can give some direction about how to use the above code in a text box.

I have a focus database file in which i have more then 50,000 providers. But it is linked with teams as i have created a chain in HTML.

So provider will be dependent on Team. When user will select team then in next list box only providers linked to that team will be selected but it will have 'ALL' Option as well.

Could you please guide me what is the best way to do this? Potentially 50 user might be accessing this at one time.

I look forward to hearing from you soon.
Many Thanks
Mustafa

WebFOCUS 7.6
Windows, All Outputs

Posts: 11 | Registered: October 13, 2010

Ignored post by MH posted

Show Post

ChristianP

Platinum Member

posted

Hide Post

Hi Dirk,

i am also very interested. i have a similar problem or task!!

Christian

WF Production Version: 7.7.02M
WF Test Version: 7.7.02M
Developer Studio: 7.7.02
HTML, EXL2K, FLEX, PDF,PPT

Posts: 156 | Location: Essen Germany | Registered: December 02, 2010

Ignored post by ChristianP posted

Show Post

Chaudhary

Platinum Member

posted

Hide Post

Hi, I tried to achive
Auto-Complete dropdown using "datalist" in WebFOCUS.
Steps,
I took ,
1-Edit box(edit1)
2- list box.(combobox1)
Bind listbox control with xml file and it works ,

  
function onInitialUpdate()
{
document.getElementById("edit1").setAttribute("list", "inputNamesList");
var datl = document.createElement("datalist");
//var att = document.createAttribute("id");
datl.setAttribute("id", "inputNamesList");
document.body.appendChild(datl)




var x = document.getElementById("combobox1");
var data= new Array();
for (i = 0; i < x.length; i++) {
    data.push(x.options[i].text.trim());
}
  var options = '';
  for(var i = 0; i < data.length; i++)
    options += '<option value="'+data[i]+'" />';
  document.getElementsByTagName('datalist')[0].innerHTML = options;




}

WF Production :- WF:8.0.0.4, 8.1.05 App-studio/Developer Studio(8.1.x) ,
8.2.0.1M , 8.2.0.2 (App-Studio8.2.x),
InfoAssist/+, InfoDiscovery
Output format:-AHTML, PDF, Excel, HTML
Platform:-Windows 7, 8,10

Posts: 186 | Location: Infobuild India | Registered: August 28, 2015

Ignored post by Chaudhary posted

Show Post

Platinum Member

posted

Hide Post

nice!
Are you able to multi-select?

WebFOCUS 8202M

Posts: 167 | Location: Montreal | Registered: September 23, 2014

Ignored post by BM posted

Show Post

Chaudhary