Autocomplete par début de mot

**fabrice91** · 25/02/2013, 16h03

Bonjour,

J'utilise le jquery-ui.js 1.10.1 pour l'autocomplete.
Cela fonctionne mais pas tout à fait comme je le voudrais.
Lorsque je tape un B dans ma zone d'input, il me propose tout ce qui CONTIENT un B, donc potentiellement beaucoup de chose, alors que ce que je souhaite est de trouver uniquement ce qui COMMENCE par un B...
Pour aller plus vite, j'utilise un array que j'instancie par une requête SQL sur toutes mes entrées. Comme je n'ai pas beaucoup de valeurs de retour, cela me semblait plus rapide que de faire une requete SQL à chaque fois avec un select du type 'B%'...
Je n'ai pas trouvé d'option permettant cela dans autocomplete. Il faut modifier le code ou bien une autre solution ?
Merci.

**danielhagnoul** · 25/02/2013, 23h43

Bonsoir

Déjà traité : http://www.developpez.net/forums/d12...e/#post7016808

**fabrice91** · 26/02/2013, 10h23

Merci pour cette réponse, je ne l'avais pas trouvé dans la recherche et je n'était pas remonté aussi loin dans les sujets...
Par contre je vois que tu limites aux 3 premiers caractères...

**fabrice91** · 26/02/2013, 11h11

Je confirme ce que disais pc75 sur ton autre post, le code ne fonctionne pas...
Je le copie colle ci dessous de nouveau que tu le testes de ton côté de nouveau et voici une copie d'écran de ce que j'obtiens, en tapant "b" on a les propositions qui contiennent un "b" mais pas uniquement qui commencent par un "b" :

Et donc le code :

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
89
90
91
92
93
94
95
96
 
<!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().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 = "";
    		}
    	});
    }
});
});
	</script>
</body>  
</html>

**SpaceFrog** · 26/02/2013, 12h46

de la capture d'ecran par photo

respects

**SpaceFrog** · 26/02/2013, 15h04

au lieu de passer par n indexOf, utilise les regexp ...

**fabrice91** · 26/02/2013, 16h39

Envoyé par SpaceFrog

de la capture d'ecran par photo

respects

Héhé, yep, on dirait la blague de la secrétaire qui met du Typex sur son écran pour corriger les fautes !

Sans rire, malheureusement toutes mes tentatives de capture d'écran sous Ubuntu se sont soldées par la disparition de la boîte de dialogue qui s'ouvrait avec les propositions (avec l'outil système de capture écran ou bien la touche "ImprEcran" ou bien sous Gimp !) donc je n'ai trouvé que cette solution !

Autocomplete par début de mot [UI]

jQuery

Vue hybride

Discussions similaires

Partager

Partager