如何在 framework7 中加载多个自动完成功能？

Question

我正在学习framework7。我的问题是：在我看来，我必须包括更多的自动完成输入，但我无法加载所有内容。

我正在使用带有 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);
  }
});
}});}

我在我的-app.js

中调用自动完成元素

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

      {
        name: 'languages',
        path: 'languages/',
        url: './pages/languages/languages.html',
        on: {
            pageInit: languages1,
                      languages2,
                      languages3

            }
      }]
 },

但它不起作用。如果我评论其他两个，它只适用于一个。

感谢您的帮助！

Answer 1

你是 ID 选择器的主要问题，你有 3 个名称为 autocomplete-dropdown-ajax-typeahead 的 ID，ID 选择器大多数只引用一个项目才能正常工作，要解决这个问题你可以这样做：

<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-1" 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-2" 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-3" type="text" placeholder="" name="language3">
    </div>
</div>
</li>

您还需要编辑 languages.js 以将每个 El 指向您的目标 ID：

const languages1 = () => {
 var autocompleteDropdownAjaxTypeahead = app.autocomplete.create({
inputEl: '#autocomplete-dropdown-ajax-typeahead-1',...

const languages2 = () => {
     var autocompleteDropdownAjaxTypeahead = app.autocomplete.create({
    inputEl: '#autocomplete-dropdown-ajax-typeahead-2',...

异步路由：

routes: [
  {
    name: 'languages',
    path: 'languages/',            
    async(routeTo, routeFrom, resolve, reject) {
      // You can put you condition to make sure all languages are fill                  then resolve url
      // For test reason you can create setInterval function thats keep             check value, when success remove interval and go to resolve
      var checkTimer = setInterval(function(){ 
        if(languages1 && languages2 && languages3){
          clearInterval(checkTimer);
          resolve({
            url: './pages/languages/languages.html',
          });
        }
      }, 500);        
    }
  }]

您可以寻找直接示例来解决您的问题，而无需更多选择：

Online Example Code

如何在 framework7 中加载多个自动完成功能？

How to load more than one autocomplete in framework7?

javascript

html-framework-7