je besoin d'un expample de id retour jQuery Autocomplete et nom à l'aide ajax

Question

je besoin d'un exemple de la façon de coder une saisie semi-automatique jQuery pour remplir product_id tout en montrant la product_name appeler une page ajax « remote.php »

 
<input name="product_name" id="product_name" type="text" value="" /> 
<input name="product_id" id="product_id" type="hidden" value="" /> 


remote.php: 

$partial = addslashes($_POST['partial_search']); 
$myDataRows = array(); 
$result = mysql_query ("SELECT product_id, product_name FROM products 
    WHERE product_name like "%$partial%"); 
while ($row = mysql_fetch_row($result)) { 
    array_push($myDataRows, $row); 
} 
$ret = json_encode ($myDataRows); 
echo $ret; 

Je ne sais pas comment le code de la saisie semi-automatique jQuery et si je dois changer remote.php

grâce

PLUS TARD aJOUTÉE:

I Worke d une autre solution:

 
<script type="text/javascript"> 
function nqi_search (type, id_name, text_name) 
{ 
    $("#"+text_name).autocomplete({ 
     source: "remote.php?&t="+type, 
     minLength: 1, 
     select: function(event, ui) { 
      $("#"+id_name).val(ui.item.id); 
     } 
    }); 
} 
</script> 

<script type="text/javascript"> 
jQuery(document).ready(function() { 

    nqi_search ("product_search", "product_id", "product_name"); 

    // also you can have many on one page with: 
    nqi_search ("vendor_search", "vendor_id", "vendor_name"); 


}); 
</script> 

Il y a un problème. cela ne semble pas fonctionner si la fonction nqi_search est placée dans un fichier .js. Je ne sais pas pourquoi?

Answer 1

Voici comment je le fais:

Remarque, j'ai codé une fonction spéciale où le JSON peut marquer un élément comme un message à la place et de cette façon vous pouvez mettre des messages dans la liste (par exemple, je mets un "Ajout d'éléments X non affichés" pour les longues listes). Pour utiliser la fonction de message, mais le texte dans le champ label et un vrai booléen pour le champ de message.

Pour utiliser sur la page que je viens

setupAutocomplete(<id of textbox>,<path to service>); 

---

$.ajaxSetup({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     data: "{}", 
     dataFilter: function(data) { 
     var msg; 

     if (typeof (JSON) !== 'undefined' && typeof (JSON.parse) === 'function') 
      msg = JSON.parse(data); 
     else 
      msg = eval('(' + data + ')'); 

     if (msg.hasOwnProperty('d')) 
      return msg.d; 
     else 
      return msg; 
     }, 
     error: function(msg) { 
     $('#error').html(msg.responseText) 
     } 
    }); 


// remove this to get rid of custom message handling 
$.widget("custom.redcomplete", $.ui.autocomplete, { 
    _renderMenu: function(ul, items) { 
     var self = this; 
     $.each(items, function(index, item) { 

     if (item.message) 
      ul.append("<li class='ui-menu-item special-red'>&nbsp;" + item.label + "</li>"); 
     else 
      self._renderItem(ul, item) 
     }); 
    } 


function setupAutocomplete(inID, inURL) { 
    var myTB = $("[id$='_" + inID + "']"); 
    // change redcomplete to autocomplete to get rid of message handling 
    myTB.redcomplete({ 
     source: function(request, response) { 
     $.ajax({ 
      url: inURL, 
      data: "{'filter': '" + request.term + "'}", 
      success: function(data) { 
       response($.map(data, function(item) { 
        return { 
        label: item.text, 
        value: item.id, 
        // remove this line and the , above to get rid of message handling 
        message: item.message 
        }; 
       })); 
      } 
     }) 
     }, 
     delay: 500, 
     minLength: 3, 
     focus: function(event, ui) { 
     myTB.val(ui.item.label); 
     return false; 
     }, 
     select: function(event, ui) { 
     // action for the select here. 
     return false; 
     }, 
     open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
     }, 
     close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     } 

    });