java下拉列表包含搜素框并时时触发？ 这种功能是插件吗？

Question

先看一下效果图：：
第一张是下拉列表第一列是一个搜素框：

第二张图能看出是 时时触发的：

我想知道怎么实现的这个效果？

Answer 1

Faites-vous référence à une implémentation front-end ou back-end ?
Le front-end a les plug-ins correspondants
Le back-end n'a besoin que d'implémenter l'interface

Answer 2

Utilisez jQuery.autocomplete dans le frontend pour définir la longueur de la chaîne que vous saisissez avant de commencer à demander des données d'arrière-plan, etc. C'est difficile de coder sur votre téléphone portable, utilisez simplement Baidu

---

Obtenons du code !

Utilisez la tête de frappe de bootstrap pour implémenter

<script type="text/javascript"
    src="/js/plugins/bootstrap3-typeahead.min.js"></script>

Vous devez donc référencer les fichiers JS pertinents sur la page. Si vous ne savez pas où le télécharger, vous pouvez le télécharger depuis Baidu. Le bootstrap normal l'a

.

<input type="text" id="test">

Je vais juste écrire ce que je veux dans la zone de saisie, car ce n'est pas le but

//自动补全
        $("#test").typeahead({
            minLength:3,//最小开始查询的字符个数
            items:5,//下拉列表中最多显示的条数
            source:function(query,process){//加载数据源
                //我们使用ajax去查询
                $.ajax({
                    dataType:"json",
                    type:"POST",
                    url:"写你自己的后台请求地址",
                    data:{keyword:query},
                    success:function(data){
                    //这个data就是一个json对象的数组{id:xx,username:xxxx}
                        if(data && data.length){
                            process(data);
                            //process就是交给我们获得数据之后用来调用的方法,这个方法执行了,下拉列表就出来了
                        }
                    }
                });
            },
            //用来告诉typeahead怎么显示json对象中的内容
            displayText:function(item){
                return item.username
            }
        }).change(function(){
            var current = $(this).typeahead("getActive");
            if(current){
                $("#test").val(current.id);
            }
        });

Ce qui précède est le code JS, n'oubliez pas de le mettre dans <script type="text/javasctrip"></scrip>

Answer 3

Le plug-in de liste déroulante de JQuery Chosen fournira cette fonction de recherche.
Vous pouvez jeter un œil à l'exemple ici : https://harvesthq.github.io/c...
Si la liste déroulante contient une petite quantité de données, vous pouvez la charger depuis le backend immédiatement et initialisez-le dans le plug-in. Si la quantité de données est importante, vous pouvez également lier des événements d'entrée dans le plug-in. Chaque fois qu'un élément est saisi, une requête asynchrone est déclenchée pour charger les éléments correspondants sur le backend.