web-dev-qa-db-fra.com

jQuery UI Autocomplete montrant tous les résultats

J'ai construit un champ de recherche à remplissage automatique pour les catégories WordPress (c'est en fait une taxonomie personnalisée), ce qui fonctionne très bien (c'est-à-dire qu'il affiche les catégories une fois tapées). Cependant, lorsque 1 clé est tapée, tous les résultats seront affichés, que cette chaîne corresponde ou non à l'une des catégories.

Voici mon code PHP (autocomplete.php, à la racine du répertoire de mon thème):

<?php
include_once($_SERVER['DOCUMENT_ROOT'].'/wp-load.php' ); // I know the traditional way to do it is loading admin_ajax but I read this was exactly the same and didn't increase the overhead to the server
if (isset($_GET['term'])) { // I suspect the problem is something to with this
    $tradeList = get_terms('trade');
    $tradeNames = Array();
    foreach ($tradeList as $trade) {
        $tradeName = $trade->name;
        array_Push($tradeNames, $tradeName);
    }
    echo json_encode($tradeNames);
}
?>

et mon code Javascript:

$(document).ready(function() {
    $(".main-search-field").autocomplete({
        source: "/wp-content/themes/local_directory/autocomplete.php",
        minLength: 1
    }); 
});

et enfin HTML:

<input type="text" class="main-search-field" name="search" id="search">

Je me rends compte que cela pourrait être mal codé, s'il est libre de le refaire. Mais ce que j'ai vraiment besoin de savoir, c'est comment obtenir que les suggestions de saisie semi-automatique soient pertinentes pour la chaîne tapée dans le champ de recherche.

Merci pour toute aide :)

ajaxsearchjquery-uiautocomplete
1
Tom Oakley

Vous obtenez tous les termes parce que vous demandez tous les termes, en fait, la ligne

$tradeList = get_terms('trade');

obtenez simplement tous les termes, en ignorant la chaîne de requête 'terme' passée au fichier.

Si vous voulez obtenir tous les termes "filterd", vous devez utiliser la chaîne dans la requête, quelque chose comme:

include_once( '../../../wp-load.php' ); // adjust the path, of course
// or dirname( dirname( dirname( __FILE__ ) ) ) . '/wp-load.php';
$term = filter_input( INPUT_GET, 'term', FILTER_SANITIZE_STRING );
if ( empty( $term ) ) exit();
$trades = get_terms( 'trade', array( 'name__like' => $term, 'fields' => 'names' ) );
if ( ! empty( $trades ) && is_array( $trades ) ) {
  echo json_encode( $trades );
}

Cela dit, notez qu'en utilisant les paramètres dans OP, chaque fois qu'un utilisateur tape un caractère dans le champ de saisie, une requête ajax est envoyée à votre serveur. Ainsi, si l'utilisateur saisit 4 lettres avant de faire un choix, vous aurez 4 requêtes http supplémentaires. , de sorte que le code devient facilement un tueur de serveur.

Donc, si vous voulez utiliser cette approche, utilisez au moins un argument minLength plus élevé.

Une alternative consiste à obtenir tous les termes, à les afficher sous forme de tableau javascript et à laisser le script effectuer le filtrage, par exemple:

$(document).ready(function() {
  var trades = <?php
  $trades = get_terms( 'trade', array( 'fields' => 'names' ) );
  echo '["' . implode( '","', $trades ) . '"]';
  ?>;
  $(".main-search-field").autocomplete({
    source: trades,
    minLength: 1
  }); 
});

Ce faisant, il n’ya pas de requête http supplémentaire, aucun fichier autocomplete.php n’est nécessaire et, à moins que vous ne possédiez des milliers de termes d’échanges, cette approche est probablement meilleure.

Remarques

Dans la première approche, l'utilisation approximative de wp-load.php est une mauvaise pratique. Je sais que vous le faites pour "ne pas surcharger le serveur", mais la mauvaise nouvelle est que les frais généraux du serveur ne diminuent pas autant manière: vous allez charger tout l'environnement WordPress, tous les plugins et le thème. De plus, sachez que votre code ne peut pas être partagé. Si le code est uniquement destiné à vous et que vous souhaitez réellement utiliser cette approche, recherchez SHORTINIT constante et son utilisation (début ici ) et chargez wp-load.php le codage en dur du chemin de l'emplacement (comme je l'ai fait) car $_SERVER['DOCUMENT_ROOT'] n'est pas abordable. peut ne pas être la valeur attendue selon la configuration du serveur.

La deuxième approche que je vous ai suggérée vous évite le problème wp-load.php et votre serveur d’un grand nombre de requêtes, mais que le code PHP repris dans le code javascript est vraiment mauvais, j’ai utilisé uniquement pour des raisons de semplicity dans cette réponse. Vous devriez placer votre code javascript dans un fichier js séparé et lui transmettre les termes en utilisant wp_localize_script .

0
gmazzap