0

jQuery UI Autocomplete を使用して DB へのリンクを呼び出し、フォームのドロップダウンに入力しています。これは正常に機能していますが、フォームにさらにフォームフィールドを追加する機能もあり (同じ名前/クラスで)、これらにオートコンプリート機能を適用したいと考えています。

これは可能ですか?また、新しいフォーム フィールドのオートコンプリート機能を再呼び出しするにはどうすればよいですか?

私のjavascriptコードは以下です...

var count = 0;

$(function(){

$('input.books').each(function() {
var autoCompelteElement = this;
var formElementName = $(this).attr('name');
var hiddenElementID  = formElementName + '_autocomplete_hidden';
/* change name of orig input */
$(this).attr('name', formElementName + '_autocomplete_label');
/* create new hidden input with name of orig input */
$(this).after("<input type=\"hidden\" name=\"" + formElementName + "\" id=\"" + hiddenElementID + "\" />");
$(this).autocomplete({source:'search.php', minLength: 3,
    select: function(event, ui) {
        var selectedObj = ui.item;
        $(autoCompelteElement).val(selectedObj.label);
        $('#'+hiddenElementID).val(selectedObj.value);
        return false;
    }
});
});


$('p#add_field').click(function(){
        count += 1;
            $('#books').append(
            '<tr>'
            + '<td><input type="text" name="BookName_' + count + '" id="BookName" class="books" /> </td>'
            + '<td><input type="text" name="Length_' + count + '" id="Length_' + count + '" /> </td> '
            + '<td><input type="text" name="ISBN_' + count + '" id="ISBN_' + count + '" /> </td> '
            + '<td><input type="text" name="Year_' + count + '" id="Year_' + count + '" /> </td>'
            + '</tr>'
            + '<strong>Link #' + count + '</strong><br />' );
        });



});
4

2 に答える 2

1

それらの新しいフィールドでオートコンプリート メソッドを呼び出しますか?

var newRow = '<tr>'
        + '<td><input type="text" name="BookName_' + count + '" id="BookName" class="books" /> </td>'
        + '<td><input type="text" name="Length_' + count + '" id="Length_' + count + '" /> </td> '
        + '<td><input type="text" name="ISBN_' + count + '" id="ISBN_' + count + '" /> </td> '
        + '<td><input type="text" name="Year_' + count + '" id="Year_' + count + '" /> </td>'
        + '</tr>';
        //+ '<strong>Link #' + count + '</strong><br />';  <--this line can not be added to a table like this! 
$('#books tbody').append(newRow);
newRow.autocomplete( ..options..);

そのような強い要素行をテーブルに追加することはできません。ブラウザはそれを修正していますが、それは非常に悪い習慣です。必要な場合は、要素の後に追加します。

于 2012-10-02T17:01:33.863 に答える
0

文字列で HTML を構築する代わりに、jQuery を使用して HTML を構築し、同時にオートコンプリートを添付できます。

$('p#add_field').click(function(){
    count += 1;
    var tr = $(document.createElement('tr'));
    $.forEach(['BookName_', 'Length_', 'ISBN_', 'Year_'], function(key){
        var td = $(document.createElement('td'));
        var input = $(document.createElement('input')).attr('type', 'text')
                                                      .attr('name', key+count)
                                                      .attr('id', key+count)
                                                      .autocomplete(// AUTOCOMPLETE HERE);
        var strong = $(document.createElement('strong')).html('Link #'+count);
        td.append(input, strong, $(document.createElement('br'));
        tr.append(td);
    });
    $('#books').append(tr);
});

このように、jQuery 関数にラップされた document.createElement を使用しているため、残りの jQuery メソッドをチェーンしてこれらの要素を構築し、同時にオートコンプリートをアタッチしてから、append を使用して要素を構築することができます。必要に応じて取り付けます。

于 2012-10-02T17:03:18.220 に答える