1

I have a problem with JQuery 1.3.0 mobile Autocomplete, because I don't know how to select a list item and add the selection into a different DIV or hidden input field! Here is my code:

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

Does anyone know how it works?

Thank's in advance...

4

3 回答 3

0

在你的 .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]);
  });
});
于 2013-04-09T00:30:48.313 回答
0

由于 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);
});
于 2013-06-06T22:47:21.103 回答
0

你可以试试这个：

$( '#addimageword' ).on('click', 'li a', function( ) {  
    var listItemText = $(this).closest("li").text();
    $('#result').text(listItemText);
    //other code
});
于 2013-09-05T04:25:20.863 回答