Plugins - Focus sur le champ recherche en V4 (mais pas en V3)

[nebz]

Bonjour,

j’ai remarqué qqch de particulier en V4, sur la page desktop/idPlugin.php si on a mis un champ de recherche dans les eqLogics, il est focusé (curseur clignotant) quand on ouvre la page du plugin.

ca pourrait ne pas être gênant mais voici un exemple :

dans ce plugin, il y a plusieurs champs recherche (j’ai du dédoubler le code javascript mais là n’est pas le problème en soi…) et à l’ouverture du plugin via le menu, on se retrouve toujours focussé sur le dernier champ recherche, donc la fenêtre a scrollé vers le bas.

le même code en V3 ne le fait pas… (meme JS meme PHP)

vous pouvez reproduire sur n’importe quel plugin officiel par exemple avec un champ recherche, à l’ouverture, le curseur est dans le champ rechercher

une idée ?

[Loic]

Bonjour
C’est volontaire… c’est pour que quand tu arrives sur la page tu puisses immédiatement faire une recherche ça évite un clic

[kiboost]

Oui c’est comme ça sur toutes les pages avec un champ de recherche. Ca permet si besoin de taper directement qql chose en arrivant sur la page.

Je vérifierai le code mais à mon avis en changeant la nomenclature des id de tes autres champs de recherche tu dois pouvoir passer outre et qu’il reste bien sur le premier en haut.

[kiboost]

Voilà la fonction

$(« input[id^=‹ in_search ›] »).focus()

Donc met sur les autres champ un id qui ne commence par in_search

[nebz]

Potentiellement ne pourrait on pas améliorer le système en général afin de supporter plusieurs champs recherche à la suite ?

Par exemple en référençant l’ID du div qui contient les éléments à rechercher directement comme attribut searchIn="" (par exemple) du champ de recherche ? Ça permettrait d’en avoir plusieurs

Après pour la regexp du focus, il suffirait de prendre la première occurrence par exemple

[nebz]

exemple concret avec searchIn=« myFirstEqList » et resetSearch=« in_searchEqlogic » dans le bouton reset :

<legend><i class="fas fa-table"></i> {{Mes Amazon Echo}}</legend>
	<div class="input-group" style="margin-bottom:5px;">
		<input class="form-control roundedLeft" placeholder="{{Rechercher}}" id="in_searchEqlogic" searchIn="myFirstEqList" />
		<div class="input-group-btn">
			<a id="bt_resetEqlogicSearch" resetSearch="in_searchEqlogic" class="btn roundedRight" style="width:30px"><i class="fas fa-times"></i></a>
		</div>
	</div>	
    <!-- Container de la liste -->
	<div class="panel">
		<div class="panel-body">
			<div class="eqLogicThumbnailContainer" id="myFirstEqList">

(le nom des attributs est à titre d’exemple évidemment)

cela permettrait donc d’aller chercher directement le champ à rechercher « searchIn » et donc de faire un js générique. cela permettrait aussi d’auto-configurer le bouton reset pour remettre à zéro le champ « resetSearch »

[kiboost]

Ca nécessiterai aussi de revoir tous les plugins.

Je vais quand même ajouter un first sur la selection du champ.

[nebz]

non, uniquement ceux qui veulent plusieurs champs recherche (si un seul, tu prends celui-là). mais oui faut trouver un moyen pour la compat v3. mais c’était une simple proposition ca me dérange pas de le gérer dans mon JS.

cool pour le first !