Jquery UI 自动完成 & Ajax 倍数 returns 成功

Question

我目前正在创建一个网站，我必须使用 API 来恢复法国的所有高等教育学校，这样当用户注册时，他输入他的大学并提供选择他感谢 Jquery ui 自动完成。

这就是它给出的：

 $('#recherche').autocomplete({
                open: function () { $('.ui-autocomplete').css('z-index', 1050);},
                source : function(requete, response){ // les deux arguments représentent les données nécessaires au plugin
                    $.ajax({
                        url : 'https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search//?dataset=fr-esr-principaux-etablissements-enseignement-superieur', // on appelle le script JSON
                        dataType : 'json', // on spécifie bien que le type de données est en JSON
                        data : {
                            q : $('#recherche').val() // on donne la chaîne de caractère tapée dans le champ de recherche
                        },

                        success : function(donnee){
                            console.log('k');
                            response($.map(donnee, function(){
                                var tab = [];
                                for(var i= 0; i < donnee["records"].length; i++)
                                {
                                    tab[i] = donnee["records"][i]["fields"]["uo_lib"];
                                }
                                console.log(tab);
                                return tab; // on retourne le tableau des écoles
                            }));
                        }
                    });
                },
      
                select : function(event, ui){ // lors de la sélection d'une proposition
                    $('#recherche').val( ui.item.desc ); // on ajoute la description de l'objet dans un bloc
                }
            });

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    max-width: 217px;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    padding: 4px 0;
    margin: 0 0 10px 25px;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/slideReveal/1.1.2/jquery.slidereveal.min.js"></script>

        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="recherche" name="school" class="center bottom-margin-10" type="text"  placeholder="Libellée établissement" >

试着写"capitole"，你会发现同样的结果出现了3次，我不明白为什么

Answer 1

关于 $.map() 的某些事情运行异常。我切换到 $.each() 并且得到了更好的结果。

$('#recherche').autocomplete({
  open: function() {
    $('.ui-autocomplete').css('z-index', 1050);
  },
  source: function(requete, response) {
    var tab = [];
    $.ajax({
      url: 'https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search//?dataset=fr-esr-principaux-etablissements-enseignement-superieur',
      dataType: 'json',
      data: {
        q: requete.term
      },
      success: function(donnee) {
        console.log('k');
        $.each(donnee.records, function(k, v) {
          tab.push(v.fields.uo_lib);
        });
        console.log(tab);
        response(tab);
      }
    });
  },

  select: function(event, ui) { // lors de la sélection d'une proposition
    $('#recherche').val(ui.item.desc); // on ajoute la description de l'objet dans un bloc
  }
});

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  max-width: 217px;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  padding: 4px 0;
  margin: 0 0 10px 25px;
  list-style: none;
  background-color: #ffffff;
  border-color: #ccc;
  border-color: rgba(0, 0, 0, 0.2);
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slideReveal/1.1.2/jquery.slidereveal.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="recherche" name="school" class="center bottom-margin-10" type="text" placeholder="Libellée établissement">

没有进行任何其他更改。如果可以使用对象，也最好使用点符号。

希望对您有所帮助。

Jquery UI 自动完成 & Ajax 倍数 returns 成功

Jquery UI Autocomplete & Ajax multiples returns from success

javascript

ajax

jquery

jquery-ui

jquery-ui-autocomplete