Use the bootstrap-select control to enter keywords in the search bar to dynamically obtain background data,
Bootstrap-select Open Source Address: https://github.com/silviomoreto/bootstrap-select
Bootstrap-select use example: http://silviomoreto.github.io/bootstrap-select/examples/
Bootstrap-select Document Description: http://silviomoreto.github.io/bootstrap-select/options/
Reference blog for bootstrap-select:Http://www.cnblogs.com/landeanfen/p/7457283.html
The control depends on the Bootstrap front-end framework;
For more information about the usage of this control, see the above link;
One of the controls is to search for the select tag options to obtain precise options. After all, there may be many options;
Now I want to dynamically obtain the option data passed in the background by typing keywords in the search bar, instead of reading all the data at a time and then searching;
The specific implementation is as follows:
1. Introduce related files:
<Head> <! -- Introduce Bootstrap styles --> <link href = "$ {pageContext. request. contextPath}/resources/css/bootstrap.min.css" rel = "stylesheet"> <! -- Bootstrap-select style --> <link href = "$ {pageContext. request. contextPath}/resources/css/select/bootstrap-select.min.css" rel = "stylesheet"> <! -- JQuery (Bootstrap depends on jQuery) --> <script src = "$ {pageContext. request. contextPath}/resources/js/jquery-3.0.0.min.js"> </script>
<! -- Bootstrap --> <script src = "$ {pageContext. request. contextPath}/resources/js/bootstrap. min. js"> </script> <! -- Bootstrap-select control --> <script src = "$ {pageContext. request. contextPath}/resources/js/select/bootstrap-select.min.js "> </script> <script src =" $ {pageContext. request. contextPath}/resources/js/select/defaults-zh_CN.min.js "> </script>
</Head>
2. select tag
<Form id = "addForm" action = "$ {pageContext. request. contextPath}/admin/authority/manager/saveAdd "method =" post "> <div class =" form-group "> <div class =" input-group "> <span class = "input-group-addon"> administrator </span> <! -- To trigger bootstrap-select, you need to add class = "selectpicker" to the search function. You need to add data-live-search = "true" --> <select data-size = "6" class = "form -control selectpicker show-tick "data-live-search =" true "title =" Enter the Administrator "id =" select-manager "name =" managerName "data-selectNameUrl =" $ {pageContext. request. contextPath}/admin/authority/managerRole/getManagerByName "> </select> </div> <div class =" form-group "> <div class =" input -group "> <span class =" input-group-addon "> Angle & nbsp; & nbsp; color </span> <select class = "form-control selectpicker show-tick" data-size = "6" data-live-search = "true" id = "select-role "name =" roleName "title =" select a role "> <c: forEach var = "selectRole" items = "$ {selectRoles}" varStatus = "statu"> <option value = "$ {selectRole. id} ">$ {selectRole. roleName} </option> </c: forEach> </select> </div> </form>
So far, I have not added any <option> </option> label under the select tab of the Administrator, so the option is empty.
:
What I want to achieve now is to trigger the event by typing a character in the search bar: dynamically obtain background data to add the <option> </option> tag;
The problem today is that the search bar is generated by the bootstrap-select control and you cannot know how to select the search bar to trigger the event in advance,
The solution is to call chrome's developer mode and find the tag generated by the bootstrap-select control, as shown in:
If you know the tags and attributes of the search bar generated by bootstrap-select, you can select this search bar to trigger the event;
3. trigger events:
<Script type = "text/javascript"> $ (). ready (function () {// trigger event by typing characters: dynamically obtain the data of the select option passed in to the background // request url var selectNameUrl =$ ("# select-manager "). attr ("data-selectNameUrl"); // select the input in the search bar and release the button to trigger the event $ ("# select-manager "). prev (). find ('. bs-searchbox '). find ('input '). keyup (function () {// type the value var inputManagerName = $ ('# addForm. open input '). val (); // call ajax if (inputManagerName! = '') {$. Ajax ({type: 'get', url: selectNameUrl, data: {// value passed to the background managerName: inputManagerName}, dataType: "Json", success: function (Selectmanagers) {// clear the old option tag under the select tag, and re-Add the option tag $ ("# select-manager") based on the new data "). empty (); if (Selectmanagers! = Null) {$. each (Selectmanagers, function (I, Selectmanager) {$ ("# select-manager "). append ("<option value = \" "+ Selectmanager. id + "\"> "+ Selectmanager. managerName + "</option>") ;}// an essential refresh $ ("# select-manager "). selectpicker ('refresh') ;}})} else // If the entered character is null, clear the previous option tag $ ("# select-manager "). empty (); $ ("# select-manager "). selectpicker ('refresh') ;}); </script>
The effect is as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
