Autocomplete => commence par

Version imprimable

06/12/2012, 12h10
pc75

Autocomplete => commence par

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.

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

Code:

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:

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.

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

Code:

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

06/12/2012, 17h03
pc75

Re,

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

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:

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>

07/12/2012, 09h44
pc75

Re,

Merci, mais malheureusement, ça ne fonctionne pas ;

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

Citation:

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.

Bonjour

J'ai oublié de tenir compte des majuscules.

Code:

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

Code:

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 = "";
    		}
    	});
    }
});

07/12/2012, 11h23
pc75

Re,

Merci, mais avec ce code, rien ne fonctionne, même sous FF !
07/12/2012, 11h34
danielhagnoul

Chez moi cela fonctionne très bien, sous Chrome et sous Firefox, avec ou sans majuscule. Sujet clos en ce qui me concerne.
07/12/2012, 12h17
pc75

Dommage !

Merci quand même.