Question

我遇到了JQuery 1.3.0移动自动填充的问题，因为我不知道如何选择列表项并将选择添加到不同的DIV或隐藏输入字段中！这是我的代码：

$( document ).on( "pageinit", "#main", function() 
{
    $( "#addimageword" ).on( "listviewbeforefilter", function ( e, data ) 
    {
        var $ul = $( this ),
        $input = $( data.input ),
        value = $input.val(),
        html = "";
        $ul.html( "" );
        if ( value && value.length > 2 ) {
            $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
            $ul.listview( "refresh" );
            $.ajax({
                type : 'GET',

                url: "./inc/search2.php",
                dataType: "json",
                data: {
                    q: $input.val()
                }
            })
            .then( function ( response ) {
                $.each( response, function ( i, val ) {
                    var substr = val.split('_');
                    var idword = substr[0];
                    var your = substr[1];
                    var lblyour = substr[2];
                    var learn = substr[3];
                    var lbllearn = substr[4];

                    var lblyourlang = substr[6];
                    var lbllearnlang = substr[7];

                    html += "<li><a href='#'>" +lblyour+": "+your+" - "+lbllearn+": "+learn+ "</a></li>";
                });
                $ul.html( html );
                $ul.listview("refresh");
                $ul.trigger("updatelayout");
            });
        }
    });

    $('#addimageword li a').click(function(){

        var listItemText = $(this).text;
        $('#result').text(listItemText);
        $('#addimageword').children('li').hide(); 
        $('#addimageword').bind(function(){
            $.mobile.listview.prototype.options.filterPlaceholder = listItemText;
        });        
        e.preventDefault();
    })

    <ul id="addimageword"
        data-role="listview"
        data-inset="true" 
        data-filter="true" 
        data-filter-placeholder="Type in your word" data-filter-theme="d">
    </ul>

    <div id="result">

    </div>

有谁知道它是如何工作的？

提前感谢...

Answer 1

在.then（）中执行类似的操作

.then( function ( response ) {
  $.each( response, function ( i, val ) {
    html += '<li class="surgeon" id="surgeon_' + val.id + '"">' + val.name + '</li>';
  });
  $ul.html( html );
  $ul.listview( "refresh" );
  $ul.trigger( "updatelayout");
  $('.surgeon').click(function(){
    var id = $(this).attr('id').split('_');
    $('#InputId').val(id[1]);
  });
});

Answer 2

由于在页面加载后添加了li，因此您需要使用.delegate()。

为a标记提供类似：

的类

 html += "<li><a class="example">" +lblyour+": "+your+" - "+lbllearn+":  "+learn+ "</a></li>";

然后有一个像：

这样的功能

$('body').delegate('.example', 'click', function() {
   var val = $(this).html();  
   $('$hiddeninput').html(val);
});

Answer 3

你可以试试这个：

$( '#addimageword' ).on('click', 'li a', function( ) {  
    var listItemText = $(this).closest("li").text();
    $('#result').text(listItemText);
    //other code
});

jquery mobile autocomplete选择选项

3 个答案: