Comment fermer mon autocomplete ?

**geeka** · 04/09/2015, 16h17

Bonsoir,
J'ai un problème dans ma liste autocomplete c'est que lorsque j'efface le mot écrit, elle ne se ferme pas, aussi, tous les résultats qui se trouvent au bas de la liste sont toujours présents. Je souhaiterais que rien ne s'affiche lorsque ma liste est vide.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  function get_XmlHttp() {
      var xmlHttp = null;
 
      if(window.XMLHttpRequest) {        // Firefox, IE7+, Opera, Safari, ...
        xmlHttp = new XMLHttpRequest();
      }
      else if(window.ActiveXObject) {    // Internet Explorer 5 or 6
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      return xmlHttp;
    }
 
    function ajaxrequest(php_file, tagID) {
 
      var request =  get_XmlHttp();
      var id_struct = document.getElementById('id_struct').value;
 
 
	var the_data = 'id_struct='+id_struct;
 
	  request.open("POST", php_file, true);            
 
      request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      request.send(the_data);
 
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          document.getElementById(tagID).innerHTML = request.responseText;
        }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<!-- Barre de recherche nom du contact-->		
	<input type="text" name="id_struct" id="id_struct" onkeyup="autocomplet()" placeholder="Rechercher le contact à éditer" autocomplete="off"/>
	<ul id="country_list_id"></ul>
	<h4 style="cursor:pointer" onclick="ajaxrequest('lecture_structure.php', 'message')"></h4>
	<div id="message"></div>

Merci pour votre aide

**NoSmoking** · 05/09/2015, 09h44

Bonjour,

...lorsque j'efface le mot écrit, elle ne se ferme pas,...

il te suffit sur le onchange/onkeyup tester le champ et suivant le cas vider la liste ou la cacher.

**geeka** · 08/09/2015, 09h11

Bonjour, merci pour ta réponse.
J'ai essayé de faire comme ça, mais ça ne change rien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function () {
					$('#country_list_id').hide();  //cacher la liste autocomplete
 
 
					$('#id_struct').on('change', function() {
						if($(this).val() != NULL) {                    // Si la valeur du champ n'est pas vide
							$('#country_list_id').show();       // Montrer la liste 
						} else {
							$('#country_list_id').hide();        // Sinon cacher la liste
					}
					});
				});