Question

我创建了一个将JSON返回给自动完成的php。例如：[{“value”：“david schuun”，“id”：“120”}]

现在我想扩展自动完成功能，将其他参数传递给这个php。

$( "#REMOTE" ).autocomplete({
            source: "json.php",
            minLength: 2,
            extraParams: {aus: 'eins'} ,          // this should work like "www.bla.de/json.php?aus=eins   " but it doesn't 
            select: function( event, ui ) {
                log(ui.item.value,ui.item.id);
            }

        });

通过URL测试此工作正常。 PHP脚本没问题。但我不知道为什么Jquery的东西不起作用。

好的，这是整个脚本：

<script>
$(document).ready(
function() {



//this functions reads every hidden field (form the added items) an puts the array as string to a hidden field      
function lesen(){
            var itemsarray = [];
          $(".nutzerid").each(function () {
           var items = $(this).attr('value');
           itemsarray.push(items);
          });
          $( "#ausschluss" ).val(itemsarray);

          };


    //this function attaches the selection (from the autocomplete) to a table it creates text, a hidden field with the user id and a button
        function log( name, id ) {
            $("<tr> <td>"  + name + "<input class='Entf' type='button' value ='Entfernen' />" + "<input type='hidden' class='nutzerid' name='hiddenField' value='" + id + "' /></td></tr>").appendTo("#log");
            $( "#log" ).attr( "scrollTop", 0 );
            lesen();

                   }
//this is the autocompletepart
        $( "#REMOTE" ).autocomplete({
            source: "json.php?aus=" + $( "#ausschluss" ).val(), //this is not working. the firebug console shows an empty param (.php?aus=&term=blabla
            minLength: 2,
            select: function( event, ui ) {
                log(ui.item.value,ui.item.id);          
                alert($( "#ausschluss" ).val());  //this works! after selecting an item from the autocomplete it shows me the value of the field "ausschluss", like it should be appended to the source
                }

        });

//this one captures the click of a button. identified by the class and kills the <tr> <td> and all elemtns in it        
$('.Entf').live('click',function(event){
     $(this).parent().parent().remove();
     lesen();
   });




    });
    </script>

任何提示？我真的不知道，为什么它与警报一起工作，而不是与源头有关。

我真的很担心这个问题。我不是JS专业人士。但是我无法理解为什么这个东西不起作用!!!!!!!

Answer 1

您可以直接将额外参数放在“源”中。这可能不是最干净的解决方案，但它应该有效。

$( "#REMOTE" ).autocomplete({
    source: "json.php?aus=eins",
    minLength: 2,
    select: function( event, ui ) {
        log(ui.item.value,ui.item.id);
    }
});

另一方面，根据其创建者

，您似乎使用的插件已被弃用

Note（2010-06-23）：此插件已弃用，不再开发。它的继任者是jQuery UI的一部分

所以我建议抓住Jquery UI自动完成

更新：（更新答案以包含新要求）

所以如果这是我们的HTML：

<input id="REMOTE" />
<input id="ausschluss" type="hidden" value="test" />

这是我们需要的JavaScript：

$(function() {
    $( "#REMOTE" ).autocomplete({
        source: "json.php?aus=" + $( "#ausschluss" ).val(),
        minLength: 2,
        select: function( event, ui ) {
            log(ui.item.value,ui.item.id);
        }
   });
});

这是一个小提琴，显示javascript部分有效：http://jsfiddle.net/43Cur/

如果查看firebug控制台，可以看到请求的地址设置了正确的参数（json.php？aus = test＆amp; term = dd）

Answer 2

您还可以使用JSON调用作为数据源并以此方式构建参数。我开始这样做，但我想我可能会通过javascript建立源URL的第一条路径并传递它。这个例子来自jquery ui样本页面： http://jqueryui.com/demos/autocomplete/#remote-jsonp

        $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "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" );
        }
    });

Answer 3

你试过这个吗？

$( "#REMOTE" ).autocomplete({
        source: "json.php",
        minLength: 2,
        data: {aus: 'eins'} ,          // this should work like "www.bla.de/json.php?aus=eins   " but it doesn't 
        select: function( event, ui ) {
            log(ui.item.value,ui.item.id);
        }

    });

Jquery：使用自动完成功能发送其他参数

3 个答案: