[SOLVED] How to load many autocomplete input in the same view?

Questions
1

Hi. I’m a beginner, i can’t load more than one autocomplete in the same page.
I put the js code in js/pages/tests/tests.js and i included it in the index.html in this way.
<script type="text/javascript" src="js/pages/tests/tests.js"></script>

the js file

 `const tests1 = () => {
  var autocompleteDropdownAjaxTypeahead = app.autocomplete.create({
  inputEl: '#autocomplete-dropdown-ajax-typeahead-1',
  openIn: 'dropdown',
  preloader: true, //enable preloader
/* If we set valueProperty to "id" then input value on select will be set according to this property */
  valueProperty: 'name', //object's "value" property name
  textProperty: 'name', //object's "text" property name
 //limit: 20, //limit to 20 results
  typeahead: true,
  dropdownPlaceholderText: 'Type...',
  source: function (query, render) {
   var autocomplete = this;
   var results = [];
  if (query.length === 0) {
     render(results);
  return;
 }
  // Show Preloader
  autocomplete.preloaderShow();

// Do Ajax request to Autocomplete data
app.request({
url: 'js/data/tests/tests1.json',
method: 'GET',
dataType: 'json',
//send "query" to server. Useful in case you generate response dynamically
data: {
   query: query,
},
success: function (data) {
// Find matched items
for (var i = 0; i < data.length; i++) {
  if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(data[i]);
}
// Hide Preoloader
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
 }
});
 }});}

const tests2 = () => {

var autocompleteDropdownAjaxTypeahead = app.autocomplete.create({
inputEl: '#autocomplete-dropdown-ajax-typeahead-2',
openIn: 'dropdown',
preloader: true, //enable preloader
/* If we set valueProperty to "id" then input value on 
select will be set according to this property */
valueProperty: 'name', //object's "value" property name
textProperty: 'name', //object's "text" property name
limit: 20, //limit to 20 results
typeahead: true, 
dropdownPlaceholderText: 'Type...',
source: function (query, render) {
 var autocomplete = this;
 var results = [];
if (query.length === 0) {
    render(results);
    return;
}
 // Show Preloader
autocomplete.preloaderShow();

// Do Ajax request to Autocomplete data
app.request({
url: 'js/data/tests/tests2.json',
method: 'GET',
dataType: 'json',
//send "query" to server. Useful in case you generate response dynamically
data: {
  query: query,
},
success: function (data) {
// Find matched items
for (var i = 0; i < data.length; i++) {
  if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(data[i]);
}
// Hide Preoloader
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
 }
});
}});}`

call it in my-app.js

{
     name: '',
     path: '',
     url: '',
     routes: [

  {
    name: 'tests',
    path: 'tests/',
    url: './pages/tests/tests.html',
    on: {
        pageInit: tests1,
                  tests2

        }
  }]
 },

the html is that

<li class="item-content item-input">
  <div class="item-inner">
    <div class="item-title item-label">Test1</div>
    <div class="item-input-wrap">
    <input id="autocomplete-dropdown-ajax-typeahead-1" type="text" placeholder="" name="test1">
</div>
</div>
</li>
<li class="item-content item-input">
   <div class="item-inner">
     <div class="item-title item-label">Test2</div>
     <div class="item-input-wrap">
    <input id="autocomplete-dropdown-ajax-typeahead-2" type="text" placeholder="" name="tests2">
</div>

but it doesn’t work.
thank you for your help

2

This is not valid JS code:

on: {
        pageInit: function () {
          tests1();
          tests2();
        },
}
1 Like
3

It works! thank you so much