2014-05-12 2 views
0

Je suis essaye de créer un champ de formulaire personnalisé de type texte (ou liste) où un utilisateur peut a) taper texte libre et/ou b) sélectionnez dans la liste déroulante. Maintenant, j'ai trouvé de nombreux articles sur la saisie semi-automatique ou le remplissage automatique, mais ce n'est pas ce que je cherche. J'ai suivi l'exemple sur la façon de créer un champ personnalisé «Ville» ici http://docs.joomla.org/J2.5:How_to_add_custom_filters_to_components et tout cela fonctionne. Cependant, il crée une liste déroulante uniquement, aucune option pour entrer du texte.Joomla (3.x) type de champ de formulaire personnalisé: texte avec suggestion dropdown

Je suis nouveau dans le développement de composants Joomla (3.x), alors peut-être qu'il me manque quelque chose de très simple ici. Avec tous ces types de champs disponibles, il est difficile de croire qu'il n'y a pas de liste déroulante avec entrée libre.

Donc 1. Puis-je faire la liste/liste par défaut pour accepter le texte libre? 2. Sinon, puis-je obtenir un pointeur sur la façon de commencer à en faire un moi-même? 3. Pour l'instant, il serait bien d'avoir ~ 10 noms de villes répertoriés, et la saisie libre, pas besoin de filtrer la liste des villes tout en tapant. Mais finalement, je voudrais savoir comment créer un filtre en tapant la version Ajax de cela. (Comme une entrée-box suggère)

Voici ce que j'utilise en ce moment, l'exemple comme lien ci-dessus J'ai aussi essayé étendre Jformfield, sans chance

class JFormFieldCftCity extends JFormFieldList { 
    protected $type = 'CftCity'; 
    public function getOptions() { 
     $options = array(); 

     $db = JFactory::getDbo(); 
     $query = $db->getQuery(true); 

     $query->select('value As value, name As text'); 
     $query->from('#__bitLuCity AS a'); 
     $query->order('a.sortOrder'); 
     $query->where('isEnabled = 1'); 
     $db->setQuery($query); 
     $options = $db->loadObjectList(); 

     return $options; 
    } 
} 

Merci

Cordialement Andreas

+0

Étant donné que cette combinaison de types de saisie select et text n'existe pas en HTML, vous devez utiliser une alternative scriptée, telle que http://ivaynberg.github.io/select2. – isherwood

+0

OK, maintenant c'est un bon contrôle en tout cas, merci pour le lien. Soin de me pointer sur Comment implémenter ceci dans mon composant? Je sais que mes fonctions ajax vont dans modelname.ajax.php, mais c'est quand je veux faire Ajax de ma vue. Où pourrais-je mettre ceci pour un champ personnalisé? – Andreas

+0

Je pense que vous construiriez la sélection comme vous êtes maintenant, puis appliquer les effets de Select2 avec jQuery. Je ne suis pas un J qualifié! ingénieur de composants. – isherwood

Répondre

1

Pour quelqu'un dans le même poste et référence future, je vais poster ma propre solution ici car je n'ai pas utilisé la suggestion de @ isherwood. Je n'ai pas encore compris complètement comment intégrer 'select2' dans mon composant, et ce n'est pas non plus nécessaire pour un comportement simple de 'combobox'.

Ceci est HTML5 seulement, pas de script supplémentaire, étend un simple JFormField.

Il permettra une entrée libre, ainsi que de sélectionner dans la liste statique et les filtres lors de la frappe.

class JFormFieldCftCity extends JFormField { 
    protected $type = 'CftCity'; 

    public function getInput() { 
     $db = JFactory::getDbo(); 
     $query = $db->getQuery(true); 
     $query->select('value As value, name As text'); 
     .... 
     $db->setQuery($query); 
     $rows = $db->loadObjectList(); 
     $control= '<input id="' . $this->id . '" name="' . $this->name 
      . '" list="dataSrc-'. $this->id .'" value="' . $this->value 
      . '" type="text" class="inputbox" />' 
      . '<datalist id="dataSrc-'. $this->id .'">'; 
      for ($i = 0; $i < count($rows); $i++) { 
      $control .= "<option value='{$rows[$i]->text}'>{$rows[$i]->text}/option>"; 
      } 
     $control .= '</datalist>'; 
    return $control; 
    } 
+0

Cool ;-) Très belle solution –

+0

sympa, mais ça ne marche pas encore en safari :( – spacebiker

0

Il ne fonctionne pas dans Safari, mais j'ai finalement trouvé une solution qui fonctionne dans tous les navigateurs, jusqu'à ce que datalist balisage HTML5 est pris en charge par tous les navigateurs:

<input type="text" class="span6 " style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;]" /> 

Vous pouvez bien sûr remplir « les données -source "avec les données de votre requête.

Questions connexes