JQuery UI Autocomplete и Ajax умножает результаты от успеха - PullRequest
Новая
       39

JQuery UI Autocomplete и Ajax умножает результаты от успеха

0 голосов
/ 15 декабря 2018

В настоящее время я создаю веб-сайт, и я должен использовать 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" >

Попробуйте написать "Капитолий", и вы увидите, что тот же результат присутствует в 3 раза, я не могу понять, почему

1 Ответ

0 голосов
/ 15 декабря 2018

Что-то про $.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">

Других изменений не внесено.Также лучше использовать точечную запись, когда вы можете с объектами.

Надеюсь, это поможет.

...