Autocomplete feature to Select field

  • 1
  • 2
  • Question
  • Updated 5 years ago
  • Answered

I have a field which is connected to the customer table. Whenever I click the dropdown arrow, all the customer is gets listed there. But this is working in the Original application and this application is supported with limited functionality.

What if the list of customers increased to 2000 or more and searching the name by scrolling down the huge list. Basically what I want is a fuctionality who can show the list as per the Alphabets. I mean I want the Autocomplete functinality to some fields. I used Datalist Tag which supports Autocomplete functionality.

What is did is I just copy pasted the source code where I want the autocomplete functionality. I have created a Page where I pasted the source code. For fetching customer details I am using API_DoQuery API and for XML parsing I used the below code

<xml ID="writersXML"


<script language="JavaScript">

function findWriter() {


var myXML= document.all("writersXML").XMLDocument;

var writersNode = myXML.documentElement;

var languageNode = writersNode.firstChild;

var fictionNode = languageNode.firstChild;

var penNode = fictionNode.firstChild;

var nameNode = penNode.firstChild;

var display =nameNode.firstChild.nodeValue;;



Can someone please help me on this. When I run this page I am not able to see any result. Result in the sense the customer details.

Photo of Rohit


  • 10 Points

Posted 5 years ago

  • 1
  • 2
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
There are so many problems with what you are describing I am not sure where to start:

  1. nobody uses "xml data islands" (ie <xml ID="writersXML" ...>) because they were a proprietary IE feature and even IE has dropped support for them in the most recent version
  2. Your src attribute is referencing ?act=API_DoQuery without any query parameters. While this is allowed and results in using default parameter values it is only going to burden the selection performance because you are probably downloading many more fields than necessary to drive the <select>
  3. The <datalist> tag is not going to do much for you as its purpose is to share a common list of <options>>between two <select> instances. A <datalist> would be used for instance where you have two or more addresses to complete and you didn't want to independently list all fifty states as <option>s in every address block.
  4. Your parsing of the XML using firstChild on successive elements does not match the structure of what would be returned by the API
  5. document.all is only supported in IE browsers - there is never a need to use it
  6. In your statement "When I run this page ..." it isn't clear what page you are even referring to.
The only thing I can really understand about your question is that you seem to have a concern over a select-able list of options becoming too long to use. If that is the case I would come up with a re-characterization of your options so that you could use a cascade of two or more options to narrow down the choices offered to the user.
Photo of Rohit


  • 10 Points
Thank for the reply Sir!!!

1) I will try some other code in place of <xml ID="writersXML" ...>.

2) I want to fetch customer details from the Database, so can you suggest which query will be helpful?

3) Which tag would you suggest for the Autocomplete feature?

4) This is structure of the XML which I get in response :

<qdbapi> <action>API_DoQuery</action> <errcode>0</errcode> <errtext>No error</errtext> <dbinfo> <name>Customers</name> <desc/> </dbinfo> <variables></variables> <chdbids></chdbids> <record> <customer_status>Active</customer_status> <oid>12</oid> <customer_name>ABC INTERNATIONALS</customer_name> <service_type>ARS</service_type> <comments/> <tier>Enterprise</tier> <sde>Brown, Sam</sde> <hot_list_customer>ABC internationals</hot_list_customer> <add_hot_list_customer> </add_hot_list_customer> <mrrp>ABC internationals</mrrp> <add_mrrp> </add_mrrp> <maximum_contract_expiration>1406678400000</maximum_contract_expiration> <total_mrrp__historical_>5435.00</total_mrrp__historical_> <current_mrrp/> <f_hot_list_true>0</f_hot_list_true> <active_hot_list_customer/> <f_hot_list_status/> <incidents> </incidents> <add_incident> </add_incident> <related_incident/> <incident___related_customer/> <incident___customer_ticket/> <related_facility_1>12</related_facility_1> <related_facility/> <related_facility_2/> <create_incidents> </create_incidents> <update_id>1402584586857</update_id> </record>
5) I have created a page in Customer's dashboard, I do not know if you can see that but I after saving that page I get option to run that code, they are like icons. Incident.html is that page. I have attached the screen shot of that.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
You have several dozen fields in that XML response and there is no indication of how many records are returned. You certainly have excess fields in the XML response if you are just trying to populate a <select>'s <option>s. How many records are in your response - 10, 100, 1000, 10000? If you get above 100 <option>s the <select> will simply not be a good user interface control and this has nothing to do with QuickBase. If you find yourself collecting this many options you should reconsider how you are modeling your options - break them up into a cascade of options using some type of hierarchical categories. For example, rather than model every car in a single jumbo field use another model that introduces Make, Model and Year to select an individual car. To me this is a modeling problem but you are jumping into writing a bunch of outdated code that I think you cut and pasted from other sources.
Photo of Joe Acunzo

Joe Acunzo, Champion

  • 270 Points 250 badge 2x thumb
Have a look at this add-on called Autocomplete for QuickBase.

Full Disclosure: I'm the author.