Auto Complete Widget: Allow more than 27,000 items in the list

I am trying to use Autocomplete with list of 27009 MeSH terms. I know NLM also provide XML options for them but I've been able to get list from my colleague. It seems widget imports alright but after few minutes when I check it again, it's not working.

Any suggestions ?

I'm not sure what the problem is, can you elaborate more?

I accessed your form without any problems and I could use autocomplete normally.

So you have 27009 items and when you add them to autocomplete it doesn't work or there is some other issues?

We'll wait for your response.

Nik

Thanks for prompt reply. You are right autocomplete does work fine for first few items, try searching term starting with Z it won't show up. I am not sure if it had something to do with me duplicating fields for 3 MeSH terms. It comes with error "form properties not saved"

Thank you for clarifying your problem!

So if you would like to input 27000 items, it will not be possible at the moment, since that widget is limited on how many characters it can hold.

If that's the case I'll send this request to our developers for a possible upgrade?

Please let me know if I can be of more assistance to you.

Thank you!

Thank you for the additional information @grade4pagasa. There is indeed a feature request to increase the limit of entries for the Autocomplete widget. I will add this thread to that feature request.

Regards.

grade4pagasa: I am trying to do what you've suggested and after pasting Javascript at the end of jotform.js and replace

var input = document.getElementById("suburbs"); 

as var input = document.getElementById("input_3") 

I am not able to get auto-complete from codepen. Ben was suggesting the need to use hide fields. Can you point me to a thread or kb article this has been discussed in detail ?

Thanks

Hello dr_munish,

I would suggest you to please share the complete source code of you page where you have added custom JavaScript code and we will take a look.

Thank you!

HTML and CSS can be checked here https://codepen.io/munishis/pen/RaVEXK

JS code too long to fit anywhere here is link for it

https://drive.google.com/file/d/0BwECnuzQLoRiUWE4ZjBTNVI5X00/view?usp=sharing

I see from the code you've provided that you are working on form 60830194953156, rather than form 60816045941152 that was initially mentioned.

There are several ways we can use to approach this, one of them is what my colleague described in that other thread by using a hidden field.

I believe an easier way would be to directly edit/autocomplete that form field named "only one field". In your test form, the ID of that element you would use for the custom autocompletion code is:

#input_3

(You can find out IDs of any elements by following this guide.)

This means that in the code example in the original codepen, you would simply replace this line of JS code:

var input = document.getElementById("suburbs");

with this one:

var input = document.getElementById("input_3");

This element does not need to be hidden on the form - in fact, you will be typing into this field. So all you need to do to make it work, is to:

1. Get the full source code of your form: http://www.jotform.com/help/104-How-to-get-your-Form-Source-Code

2. Edit the source code by adding your custom scripts to it, and use the ID of input_3 element in the custom code so that the autocompletion code works on this field directly.

Please try it out and let us know if you run into any snags along the way.

Boris: I wish it was that simple. I started off doing that obvious change: check comment from March 24, 2016, at 01:39 AM. I've used the code from code pen.io link and replaced one variable like HTML and CSS from source code and behaves alright till I replace jotform.js file elements. I think it is something to do with how Textfield is defined in JS file that undoes the desired behavior.

http://codepen.io/ambrose/pen/VamxRy/

grade4pagasa probably knows the answer better as he's originally suggested the solution.

I will try implementing this solution and get back to you as soon as I have some update.

Thanks Nik_C look forward to your solution.

@dr_munish

I'm sorry it takes this long, I'm still trying to find a workaround for this.

Will keep you posted.

Do you think referring to JSON instead of adding variables to js file may be better alternative?

http://easyautocomplete.com/guide

Using JSON seems like a viable option. Although can you try adding the resources in your pen settings to see if that fixes the issue with the autocomplete from codepen?

javascriptDISABLED:

https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.js

css:

https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css

Do let us know how it goes.
Regards.

Chrlistian: Great tools, just like one from grade4pagasa. As the author of the tool, Lea Verou said there are several autocomplete tools out there but the question is integration with Jotform. I've downloaded the source files, added reference in the header to this CSS and JS file in index.html. It doesn't work, maybe I am missing something. Do you mind sharing the zip with this added to the test form ? 

Thanks again for all the help. I've tried other web form tools out there over last week and still prefer Jotform over them if we can solve this problem. 

Could you please provide us the downloadable XML file or your text list of the MeSH terms? 

It's possible that the custom script is conflicting or we are indeed missing something. I'll try to come up with a possible solution but will need to actually see the list you have so that we can better test it.

Data is from US National Library of Medicine and I've been using CSV mile with one dataset but it can be downloaded in various formats from DTD,ASCII to XML from here https://www.nlm.nih.gov/mesh/filelist.html 

Here is link to Excel in my Dropbox Public folder and I only need term: value combinations from it.

https://dl.dropboxusercontent.com/u/5830802/MeSH%20List.xlsx

Unfortunately, I'm not sure if we could read an outside source like excel and output it in the autocomplete widget or script. It is possible but the tricky part is to how to read the excel file and parse it on JSON. 

Perhaps using an XML to JSON converter then using the autocomplete plugin in this link https://leaverou.github.io/awesomplete/ would work. Here's a script that lets you convert the XML to JSON: https://github.com/enkidootech/xml2json.

The difference with the scripts shared is that they are purely Javascript, they do not use other JS libraries like jQuery. The reason why we don't use it is because it will most likely conflict with the form's full source code. 

I also checked the website link https://www.nlm.nih.gov/mesh/download_mesh.html and I'm seeing in this page that the XML file is around 200 MB? I'm not sure if that is an ideal thing to load by a script. Perhaps I'm missing something in your setup. The most practical way that I see this to be accomplish is to import your MeSH terms in a database like a MySQL, after that, you should be able to call them more faster. But it still might be a challenge on how to call them in your auto complete script.

I have forwarded a feature request to update or improve the Auto Complete widget to allow that number of items.