Autocomplete => commence par

**pc75** · 06/12/2012, 12h10

Bonjour,

Je souhaite utiliser ce code dans une de mes pages :
http://jqueryui.com/autocomplete/

Tout fonctionne, mais je ne sais pas comment modifier le code (je ne suis pas assez pointu en js) pour que la recherche se fasse uniquement sur le début des items et non pas au milieu d'un mot.

Quelqu'un sait faire ?

Merci.

**kopax** · 06/12/2012, 14h34

J'ai regardé la source rapidement.
Apparement la source (les datas) de l'autocomplete peuvent être setter dans les options suivant trois conditions

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
	_initSource: function() {
		var array, url,
			that = this;
		if ( $.isArray(this.options.source) ) {
			array = this.options.source;
			this.source = function( request, response ) {
				response( $.ui.autocomplete.filter( array, request.term ) );
			};
		} else if ( typeof this.options.source === "string" ) {
			url = this.options.source;
			this.source = function( request, response ) {
				if ( that.xhr ) {
					that.xhr.abort();
				}
				that.xhr = $.ajax({
					url: url,
					data: request,
					dataType: "json",
					success: function( data ) {
						response( data );
					},
					error: function() {
						response( [] );
					}
				});
			};
		} else {
			this.source = this.options.source;
		}
	},

Sachant que dans la source de l'exemple

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
31
    <script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>

Lui utilise la premier condition, l'array, puis applique un filter, l'autre utilise ajax et un callback, l'autre pas grand chose.

On ne sais pas ce que t'utilise, en ésperant que ca va t'aider.

**SpaceFrog** · 06/12/2012, 15h15

y'a pas moyen de faire un truc dans le genre

Code :

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

1
2
3
 source: function(availableTags,debut){  // et ici une fonction qui retourne un array filtré 
return filteredArray;
}

**pc75** · 06/12/2012, 17h03

Re,

Merci, mais là, c'est trop compliqué pour moi !

**danielhagnoul** · 06/12/2012, 23h42

Bonsoir

Ma page de test (il suffit de copier-coller pour tester) avec la recherche limitée aux trois premiers caractères. Faites une recherche sur la lettre "l" par exemple.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/overcast/jquery-ui.css">
	<style>
		/* TEST */
 
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<h2>Titre 2</h2>
	<section class="conteneur">
 
		<div class="ui-widget">
			<label for="tags">Tags: </label>
		    <input id="tags" />
		</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-12-06T23:41:46.411+01:00" pubdate>2012-12-06T23:41:46.411+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
		"use strict";
 
		$(function(){
 
			var availableTags = [
			    "ActionScript",
			    "AppleScript",
			    "Asp",
			    "BASIC",
			    "C",
			    "C++",
			    "Clojure",
			    "COBOL",
			    "ColdFusion",
			    "Erlang",
			    "Fortran",
			    "Groovy",
			    "Haskell",
			    "Java",
			    "JavaScript",
			    "Lisp",
			    "Perl",
			    "PHP",
			    "Python",
			    "Ruby",
			    "Scala",
			    "Scheme"
			];
 
			$( "#tags" ).autocomplete({
			    "source" : availableTags,
			    "response" : function( event, ui ){
			    	var str = $( this ).val();
 
			    	$( ui.content ).each( function( i, item ){
			    		/*
			    		 * Recherche uniquement dans les trois premiers caratères : 0, 1 et 2.
			    		 */
			    		if ( item.value.indexOf( str ) > 2 ){
			    			item.label = item.value = "";
			    		}
			    	});
			    }
			});		 
 
		});
	</script>
</body>  
</html>

**pc75** · 07/12/2012, 09h44

Re,

Merci, mais malheureusement, ça ne fonctionne pas ;

Sous IE, j'ai ce message et rien ne se passe :

Détails de l’erreur de la page Web

Message*: 'console' est indéfini.
Ligne*: 30
Caractère*: 2
Code*: 0
URI*: http://danielhagnoul.developpez.com/lib/dvjh/base.js

Sous Firefox, je n'ai pas cette erreur, mais sur la première lettre saisie, ça m'affiche tous les mots contenant cette lettre. Par contre, à partir de la deuxième lettre saisie, ça semble fonctionner.

**danielhagnoul** · 07/12/2012, 10h58

Bonjour

J'ai oublié de tenir compte des majuscules.

Code :

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

1
2
3
4
<div class="ui-widget">
	<label for="tags">Tags: </label>
    <input id="tags" />
</div>

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
];
 
$( "#tags" ).autocomplete({
    "source" : availableTags,
    "response" : function( event, ui ){
    	var str = $( this ).val().toLowerCase(),
    		n = -1;
 
    	$( ui.content ).each( function( i, item ){
    		/*
    		 * Pour prendre en compte les majuscules et
    		 * les minuscules il faut utiliser 
    		 * toLowerCase().indexOf().
    		 */
    		n = item.value.toLowerCase().indexOf( str );
 
    		/*
    		 * Recherche uniquement dans les trois premiers caratères : 0, 1 et 2.
    		 */
    		if ( n == -1 || n > 2 ){
    			item.label = item.value = "";
    		}
    	});
    }
});