Form Design: Creating autocomplete fields in my form

Dear colleagues,

Hope you are doing fine!

I'm trying to use this form https://form.jotformz.com/81972633965672 with autocomplete function with jqyery

https://goodies.pixabay.com/jquery/auto-complete/demo.html

When I insert manually on the HTML the Jquery to my form design look like freeze.

I have already tried to do changes as chnage $ for Jquery and to use jQuery.noConflict()

Someone has another tip ?

Have a ncie day!

The issue may be happening due to different version of jQuery working on the same page, the one used on your plugin and the one used in JotForm. 

I would recommend you to kindly try the following workarounds in order to use different versions in a single page: 

https://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page

https://www.tutorialspoint.com/How-to-use-multiple-versions-of-jQuery-on-the-same-page

I hope this helps. 

I have also faced this issue and then I asked iCloud Support for help. They said that it may be due to the two different version of jquery on the same page.

You can use the Autocomplete Widget in your form to achieve what you want, simply add the Widget to your form and enter the possible inputs of the field, so the Widget can suggest to the user a string that is similar to the one that's being typed:

You can see this widget working in the screencast below:

You can clone this form here:

https://form.jotform.com/81975421574969

Contact us if you need further assistance,

Thanks.

Related Links:

https://widgets.jotform.com/widget/autocomp

I tried as @Kevin_g tip but doesn't work :(

For @Luisvcsilva I can't to use the widget because I have around 20.000 itens on the autocomplete.

My think that the conflict happens between Prototype and Jquery, 

My header stay as below

 ===============

<script src="https://cdn.jotfor.ms/js/vendor/imageinfo.js?v=3.3.6874" type="text/javascript"></script>

<script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>

<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.6874" type="text/javascript"></script>

<script src="https://cdn.jotfor.ms/js/vendor/math-processor.js?v=3.3.6874" type="text/javascript"></script>

<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="scripts/jquery.mockjax.js"></script>

<script type="text/javascript" src="scripts/jquery.autocomplete.js"></script>

<script type="text/javascript" src="scripts/auto-clientes.js"></script>

<script type="text/javascript" src="scripts/auto-produtos.js"></script>

<script type="text/javascript" src="scripts/db-clientes.js"></script>

<script type="text/javascript" src="scripts/db-produtos.js"></script>

<script type="text/javascript" src="scripts/jquery.validationEngine.js"></script>

<script type="text/javascript" src="scripts/jquery.validationEngine-pt_BR.js"></script>

<script type="text/javascript" src="scripts/jquery.colorbox.js"></script>

<script type="text/javascript">

Can you provide a demo page where we could check the form with the autocomplete plugin? We need to test it on our browser so we can assist you with the conflict.

Hi Elton.

Here we go.

Below you can find link for files :)

https://drive.google.com/file/d/1TxaqHgz-Qft4Z6z-03ggHjTC03h4dsyX/view?usp=sharing

Thank you for help me 

Thanks for providing the files, Julio. We're currently fixing your page and we'll get back to you shortly.

Hi Julio,

We managed to add the autocomplete script made by Pixabay in your form by removing the conflicts between the scripts in your page.

The first thing we've done was to comment the inclusion of two scripts that were conflicting between each other and add the JS files containing the variables that would be used in the autocomplete field (products, clients, etc.). Then the CSS for the autocomplete box was added (line 222) and the script that creates the autocomplete box and suggests the strings based on the match between a substring of the input and the substrings of the variable "choices" (line 232).

Notice that in order to call the "autoComplete" function, we called the function through the jQuery.noConflict() function, in order to releases the hold on the $ shortcut identifier, thus, avoiding the conflict between the scripts.

We added the autocomplete box only for the first text field labeled "Item" in the second collapsed section of your form (the one with the id="input_17"). However, you can add a regular expression to add the scripts to all text fields, like the one below:

input[id^=d]

You can check out your form working with the autocomplete field made by Pixabay in the screencast below:

You can test your form in the link below:

https://shots.jotform.com/elton/juliodv/

Feel free to contact us,

Thanks.

First of all I would like to say Thank you so much :))))

Just another question.

for multiple filds how it works ? sorry but I don't understand well

<script type="text/javascript">
    var $j = jQuery.noConflict();
$j(function(){
            $j('#input_17' , '#input_19' , '#input_21').autoComplete({
                minChars: 1,
                source: function(term, suggest){
                    term = term.toLowerCase();
                    var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML'];
                    var suggestions = [];
                    for (i=0;i<choices.length;i++)
                        if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);
                    suggest(suggestions);
                }
            });
        });
  </script>

The script should be like this:

Correct:

$j('#input_17, #input_19, #input_21').autoComplete

Incorrect:

$j('#input_17' , '#input_19' , '#input_21').autoComplete

All the input fields you want to include in the JQuery script should be enclosed only in a single '' and not per input field. Remove those red quotation mark in my sample above.

I hope this helps. Let us know if you have any questions or if you need further assistance.