Jquery UI 自动完成和 Ajax 倍数从成功返回

Posted 2023-05-08

【中文标题】Jquery UI 自动完成和 Ajax 倍数从成功返回

【英文标题】：Jquery UI Autocomplete & Ajax multiples returns from success

【发布时间】：2019-05-16 11:15:37

【问题描述】：

我目前正在创建一个网站，我必须使用 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次，我不明白为什么

【问题讨论】：

或“paul sabatier”

【参考方案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">

没有进行任何其他更改。如果可以处理对象，也最好使用点表示法。

希望对您有所帮助。