9
votes

Afficher aucun message de résultats sur jQuery autocomplete

J'utilise le Plugin JQuery Autocomplete , pas l'interface automatique de l'UI. J'aimerais faire un message Neckickable aucun message de résultats apparaît chaque fois qu'ils entrent quelque chose qui n'a aucun résultat de l'autocomplete. Comment puis-je faire ça?

jquery autocomplete

1 commentaires

Donc, s'il n'y a pas de résultats, vous voulez que cela descendit et montrent un "résultat", qui étant un élément indiquant "aucun résultat" - et qu'il soit nébuleux?

3 Réponses :

0
votes

Voici 1/2 une solution; Demandez à votre appel Ajax renvoyer la chaîne "Aucun résultat" quand il n'a aucun résultat.

Pour que le résultat unique n'est pas cliquable, il faut probablement chercher à la source du plugin.

3 commentaires

Je suis prêt à accepter une solution qui n'envoie aucun résultat de PHP ou de JS, peu importe pour moi.

@babonk: Avez-vous mis en œuvre les résultats de votre PHP?

Actuellement non, mais je pourrais faire cela s'il y avait une solution

5
votes

Voici une solution qui nécessite quelques petites modifications à JQuery.Autocomplete.js.

dans jquery.Autocomplete.js.js: p>

Modifier la fonction Hideresultsnow () à celle-ci appelle ELTLEDATA () première chose p>

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
  $("#example").autocomplete(data);

  });
  </script>

</head>
<body>
  API Reference: <input id="example" /> (try "C" or "E")


  <div id='emptyData' class='ac_results' style='display: none; position: absolute; width: 151px; top: 20px; left: 91px;'>
    <ul style="max-height: 180px; overflow: auto;">
      <li id='noDataMsg' >No Results</li>
    </ul>
  </div>

</body>
</html>

3 commentaires

Merci, ça a fonctionné pour moi. Couple de changements que j'ai faits pour mon usage: 1) Forcé de ne pas montrer () quand il n'y avait rien d'entré 2) avec plusieurs autocompleurs sur la page, vous devez ajouter des ifs pour le faire fonctionner avec les bons. Merci pour la réponse approfondie!

@babonk: Comment avez-vous forcé cette obligation de ne pas montrer quand rien n'a été entré et probablement avant toute entrée?

@Innatev ici est ma jquery.Autocomplete.js. Vous pouvez différer de voir les changements que j'ai faits, je pense que j'ai fait quelques: Pastebin.com/sknh9fiy

1
votes

Je pense que au lieu d'obtenir un autocomplete pour faire l'AJAX, vous pouvez le faire vous-même, puis transmettez les résultats à l'autocomplete, avec un filtre simple entre ces deux pour aucun résultat entrant dans le serveur.

var input = $('input.autocomplete');
var inputLimit = 10;

// Create warning message and hide it
var warning = $('<p></p>').insertAfter(input).text('No results').addClass('warning').hide();

input.keyup(function(){
    warning.hide();

    $.get('url.php', {q: this.value, limit: inputLimit}, function(data){
        if(data){
            input.autocomplete(data);
        } else {
            warning.show();
        }
    }
});

0 commentaires