jQueryUI autocomplete - place les résultats de recherche adjacents à l'entrée dans DOM

J'utilise jQueryUI's autocomplete, mais pour les raisons suivantes, je voudrais déplacer les résultats de la recherche dans le DOM à côté de la balise d'entrée qui fait la recherche.jQueryUI autocomplete - place les résultats de recherche adjacents à l'entrée dans DOM

Il est plus facile de voir this on jsFiddle, mais essentiellement du code démontrant la question ressemble à ceci:

<html> <head> 
<link rel="stylesheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/flick/jquery-ui.css" /> 

<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript"> google.load("jquery", "1.4"); 
    google.load("jqueryui", "1.8"); </script> 
<script> 
$(function() { 
    $("#X").autocomplete({ 
     source: ['abc', 'def', 'ghi'] 
    }); 
}); 
</script> 
<style type="text/css"> 
    .B { display: none; } 
    .A:hover .B { display: block; } 
</style> 
</head> <body> 

Hello 
<div class='A'> 
select: 
    <div class='B'> 
    <input id='X' /> 
    </div> 
</div> 
World 

</body> </html>

Le problème est que quand on pointeur reste sur une option autocomplete l'élément contenant la balise d'entrée de autocompleting n'est plus dans 'mouseover'ed' et selon les règles CSS, l'étiquette d'entrée disparaît avec son conteneur. Ce n'est pas le comportement désiré; Je voudrais garder l'étiquette d'entrée visible lorsque je sélectionne les sélections de saisie semi-automatique.

J'espère et je pense qu'il serait possible de déplacer les éléments autocomplete vers le DOM à côté de la balise d'entrée (c'est-à-dire x = $("#X"); x.append(x.autocomplete('widget'))), et donc les règles CSS garderaient l'entrée et son parent visible. Hélas, cela ne fonctionne pas.

Je serais reconnaissant pour toute réflexion sur la façon d'obtenir ce mélange de CSS et de jQueryUI.

Merci.

Brian

Source

2010-12-06 Brian M. Hunt

Cela semble être quelque chose qui devrait être pris en charge en mode natif dans jQuery UI! Quoi qu'il en soit, voici quelque chose que je pense fonctionnera:

$("#X").autocomplete({ 
    source: ['abc', 'def', 'ghi'], 
    open: function($event, ui) { 
     var $widget = $("ul.ui-autocomplete"); 
     var $input = $("#X"); 
     var position = $input.position(); 

     $("div.B").append($widget); 

     $widget.css("left", position.left + $input.width()); 
     $widget.css("top", position.top);  
    } 
});

Cela positionne le widget en déplaçant la zone de remplissage automatique à droite de l'entrée, et résout le problème de refinancement en annexant le widget à la même <div> le <input> appartient à.

http://jsfiddle.net/U2B9f/1/

Edit: Cette solution fonctionnera, en particulier pour les anciennes versions de jQuery UI, mais la réponse de Brian ci-dessous est une meilleure solution.

Source

2010-12-06 04:35:12

Génial. Merci, Andrew. :) Je pense que c'est quelque chose que jQuery UI devrait faire nativement, aussi! –

Dans le cas où c'est un comportement inattendu, j'ai créé un ticket pour ce problème: http://bugs.jqueryui.com/ticket/6724 –

est ici une réponse qui pourrait être préférable à Andrew Whitaker (et de par le billet que j'ai commencé: http://bugs.jqueryui.com/ticket/6724):

En utilisant l'option appendTo de autocomplete, à savoir

$("#X").autocomplete({ 
    appendTo: $(".B"), 
    source: ['abc', 'def', 'ghi'], 
});

Vous pouvez voir this in action on jsFiddle.

Source

2010-12-06 19:06:26

C'est génial, je n'aurais jamais su que cette option existait! Je suppose que vous devez encore faire un peu de supercherie pour que la boîte apparaisse quelque part ailleurs que sous la cible ' ' –

@Andrew: C'est génial non? De plus, il n'y a pas de ruse pour positionner la boîte, non plus - la dernière version de 'autocomplete' prend aussi un argument' position' - voir https://github.com/jquery/jquery-ui/blob/master/ui /jquery.ui.autocomplete.js! –

jQueryUI autocomplete - place les résultats de recherche adjacents à l'entrée dans DOM

Répondre

Questions connexes