Я изучаю фреймворк7.Моя проблема заключается в том, что: на мой взгляд, мне нужно включить больше автозаполнения ввода, но я не могу загрузить все.
Я использую раскрывающийся список с Ajax-Data + Typeahead https://framework7.io/docs/autocomplete.html
мой html
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Language1</div>
<div class="item-input-wrap">
<input id="autocomplete-dropdown-ajax-typeahead" type="text" placeholder="" name="language1">
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Language2</div>
<div class="item-input-wrap">
<input id="autocomplete-dropdown-ajax-typeahead" type="text" placeholder="" name="language2">
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Language3</div>
<div class="item-input-wrap">
<input id="autocomplete-dropdown-ajax-typeahead" type="text" placeholder="" name="language3">
</div>
</div>
</li>
Я поместил код js в js / pages / languages / languages.js и включил его в index.html следующим образом
<script type="text/javascript" src="js/pages/languages/languages.js"></script>
languages.js
const languages1 = () => {
var autocompleteDropdownAjaxTypeahead = app.autocomplete.create({
inputEl: '#autocomplete-dropdown-ajax-typeahead',
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/languages/languages1.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 languages2 = () => {
var autocompleteDropdownAjaxTypeahead = app.autocomplete.create({
inputEl: '#autocomplete-dropdown-ajax-typeahead',
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/languages/languages2.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 languages3 = () => {
var autocompleteDropdownAjaxTypeahead = app.autocomplete.create({
inputEl: '#autocomplete-dropdown-ajax-typeahead',
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/languages/languages3.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);
}
});
}});}
и я вызываю элементы автозаполнения в my-app.js
{
name: '',
path: '',
url: '',
routes: [
{
name: 'languages',
path: 'languages/',
url: './pages/languages/languages.html',
on: {
pageInit: languages1,
languages2,
languages3
}
}]
},
, но это не работает.Это работает только один, если я комментирую два других.
Спасибо за вашу помощь!