我需要jQuery的自动完成功能的用ajax

Question

我需要如何同时显示PRODUCT_NAME调用一个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; 

编写一个jQuery自动完成填充的product_id一个例子返回标识和名称的expample我不知道如何编写jQuery的自动完成，如果我需要改变remote.php

感谢

后来补充：

我借机d另一种解决方案：

 
<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> 

有一个问题。如果将nqi_search函数放入.js文件中，它似乎不起作用。我不知道为什么？

Answer 1

这是我要做的事：

注意，我编写了一个特殊的功能，其中JSON可以标记一个项目作为消息，而不是和这种方式，您可以把邮件列表（例如，我把长列表中的“添加X项目不显示”）。要使用消息功能，但使用标签字段中的文本和消息字段的真布尔值。

要使用此页面上的我只是

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"); 
     } 

    });