[CLOSED] autocomplete textbox

May 26, 2010, 06:47 PM

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,

May 27, 2010, 06:37 AM

<JJI>

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,

May 27, 2010, 06:54 AM

<JJI>

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,

May 30, 2010, 06:24 PM

Waz

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 ?

May 31, 2010, 01:44 AM

Ram Prasad E

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.

June 10, 2010, 10:45 AM

Neenz

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.

June 11, 2010, 06:07 AM

<JJI>

Neenz,

Would you be so kind to share your code?

Thanks

April 20, 2011, 06:48 AM

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

April 20, 2011, 08:24 AM

ChristianP

Hi Dirk,

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

Christian

May 12, 2017, 05:47 AM

Chaudhary

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;




}

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!