jquery autocomplete en utilisant json

Question

J'ai essayé tellement de choses mais je ne comprends pas cela tellement confus.

Je possède ce

<input id="wba" type="search" name="q" value="" class="search box" /> 
<input type="submit" value="Go" class="search button" /> 

également un fichier php

header('Cache-Control: no-cache, must-revalidate'); 
header('Content-type: application/json'); 

$arr = array('test'=>'hello world'); 

echo json_encode($arr); 

que pour javascript j'ai tout essayé, y compris les démos du site jquery, mais pas de chance ... quelqu'un là-bas aider moi configurer la saisie semi-automatique pour afficher les données?

EDIT

$(function() { 
     function log(message) { 
      $("<div/>").text(message).prependTo("#log"); 
      $("#log").attr("scrollTop", 0); 
     } 

     $("#wba").autocomplete({ 
      source: function(request, response) { 
       $.ajax({ 
        url: "search.php", 
        dataType: "jsonp", 
        data: { 
         featureClass: "P", 
         style: "full", 
         maxRows: 12, 
         name_startsWith: request.term 
        }, 
        success: function(data) { 
         response($.map(data.sites, function(item) { 
          alert(item); 
          window.console.debug(item); 
          return { 

           label: item.name , 
           value: item.url 
          } 
         })) 
        } 
       }) 
      }, 
      minLength: 2, 
      select: function(event, ui) { 
       log(ui.item ? ("Selected: " + ui.item.name) : "Nothing selected, input was " + this.value); 
      }, 
      open: function() { 
       $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
      }, 
      close: function() { 
       $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
      } 
     }); 
    }); 

Ce code provient du site de jQueryUI (démo) ...

Answer 1

Il devrait être quelque chose comme ça

// JS 
$(function() { 
    $("#wba").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
     url: "search.php", 
     dataType: "jsonp", 
     data: { q: request.term }, 
     success: function(data) { 
      response($.map(data, function(value,key) { 
      return { label:value.label , value: value.val } 
      })); 
     } 
     }); 
    }, 
    minLength: 2 
    }); 
});​ 

// PHP 
$results = array(
    array('label' =>'label1', 'val' => 'value1'), 
    array('label' =>'label2', 'val' => 'value2'), 
    array('label' =>'label3', 'val' => 'value3') 
); 
// Optionally do something with the user input ($_GET["input_value"]) 
echo $_GET['callback'].'('.json_encode($result).');'​​​​​​​​​ 

je ne sais pas pourquoi mais cela fonctionne ...

Answer 2

Le principe de base, sans aucun code, est ceci:

• En jQuery , lie un écouteur d'événement à l'entrée de sorte que lorsque l'utilisateur saisit quelque chose, une fonction est appelée
• fonction t envoie alors la valeur de l'entrée à votre script PHP en utilisant l'une des fonctions ajax jQuery
• Le script php echos une chaîne codée JSON
• La jquery fonction ajax reçoit la chaîne
• Cette fonction prend alors les données JSON et l'ajoute de manière stylisée à l'extérieur de l'entrée
• Chacune de ces options a un écouteur d'événement lié de sorte que lorsqu'une option est cliquée, quelque chose se produit - soit l'entrée est remplie avec l'élément cliqué, une autre fonction est exécutée , une page est chargée, etc.

Il y a beaucoup de manières différentes d'accomplir ceci, c'est pourquoi je n'ai pas répondu avec une fonction réelle. Cela dépend de vos objectifs.

Answer 3

Voici comment je l'ai implémenté en utilisant C# sur le serveur.

JavaScript

function InitializeElement (element) { 
    element.autocomplete("ServerPage.ashx", { 
     formatItem: function(data) { 
      return "<span style=\"font-size:9pt;word-break:break-all;\">" + data[0] + "<br />" + data[1] + "</span>"; 
     } 
    }); 
    element.result(function(event, data, formatted) { 
     jq(event.currentTarget).siblings('input[type=hidden]').val(data[2]); 
     event.currentTarget.value = data[0]; 
     event.currentTarget.title = data[1]; 
    }); 
} 

C#

public class ServerPage : ApplicationHandler 
{ 
    protected override void Process() 
    { 
     String text = (this.Request.Params["q"] ?? String.Empty); 

     if (text.Length > 0) 
     { 
      using (DatabaseRecords records = this.Core.Database.ExecuteRecords("StoredProcedure", new KeyValue("Text", text))) 
      { 
       while (records.Read()) 
       { 
        Response.Write(records.GetString("Code") + "|" + records.GetString("Description") + "|" + records.GetInt32("Id") + "\n"); 
       } 
      } 
     }  
    } 
}