Official website address: https://framework7.io/docs/autocomplete.html#autocomplete-parameters
Renderings:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#2196f3">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<title></title>
//css引用样式
<link rel="stylesheet" href="../framework7-4.4.10/packages/core/css/framework7.bundle.css">
<link rel="stylesheet" href="../framework7-4.4.10/kitchen-sink/core/css/app.css">
<link rel="apple-touch-icon" href="../framework7-4.4.10/kitchen-sink/img/f7-icon-square.png">
//js引用
<script src="../framework7-4.4.10/packages/core/js/framework7.bundle.min.js"></script>
<script src="../framework7-4.4.10/kitchen-sink/core/js/routes.js"></script>
<script src="../framework7-4.4.10/kitchen-sink/core/js/app.js"></script>
<script src="../framework7-4.4.10/packages/core/components/picker.js"></script>
// html page
<div class="list no-hairlines-md">
<div class="block-header">Dropdown With Ajax-Data</div>
<ul>
<li class="item-content item-input" onclick="dropdownajax()">
<div class="item-inner">
<div class="item-title item-label">Language</div>
<div class="item-input-wrap">
<input type="text" placeholder="Language" id="autocomplete-dropdown-ajax" />
</div>
</div>
</li>
</ul>
</div>
//js
dropdownajax function () {
var autocompleteDropdownAjax = app.autocomplete.create ({
inputEl: '# AutoComplete-dropdownajax', // ID
OpenIN: 'DropDown', // Open: Page, popup, DropDown
the preloader: to true, / / include a pre-set to true to automatically layout loader
/ * If we valueProperty to "id", then the input value is set according to the select attribute * /
valueProperty: 'name', // object key matches the name represents the key value
textProperty: 'name', name of the key // matches object representing the value of the item display, as a display option title
limit: 20, // display automatically limit each query maximum the number of items
typeahead: to true, // pre-enter ---- (enabled type in advance, pre-filled input value in the first match)
dropdownPlaceholderText: 'the Try "JavaScript"', // mouse put up the message
source: function (query,render) {// query as input information, the data used to bind to alternative Reader column
var = AutoComplete the this;
var Results = [];
IF (query.length === 0) {
the render (Results); // if no value, Alternatively, the display list is empty
return;
}
autocomplete.preloaderShow (); warning device (motion circle behind the icon) displays //
// Ajax request auto-complete data it
app.request ({
url: 'json / AutoComplete-languages.json',
method: 'GET', // the current time for personal use, type and method that can be of
dataType: 'json ',
Data: {
Query: Query, // send "query" the server to dynamically generate a useful response.
},
Success: function (Data) {
for (var I = 0; I <data.first.length; I ++ ) {
IF (data.first [I] .name.toLowerCase () the indexOf (query.toLowerCase ())> = 0) results.push (data.first [I]);. // find a match
}
autocomplete.preloaderHide (); // Close warning device (motion circle behind the icon)
the render (results); // item presented (displayed) by passing an array of result items with
}
});
}
});
AutocompleteDropdownAjax.open (); // js wrote this paragraph in the main page, be sure to Open ()
}
// json file:
{
"first": [
{
"name": "Apple"
},
{
"name": "Aapple"
},
{
"name": "Apricot"
},
{
"name": "Avocado"
},
{
"name": "Banana"
},
{
"name": "Melon"
},
{
"name": "Orange"
},
{
"name": "Peach"
},
{
"name": "Pear"
},
{
"name": "Pineapple"
}
]
}
Precautions and wrote an article on the same, for the use, please refer to the previous article references the css and js references and notes
Here are just a set of simple combination, a method to use ajax dynamic loading, detailed some of the properties methods and events still need to go look at the official website