JqueryUI自动完成结果列表与jquery移动

我想推动自动完成源的结果列表ul元素的jquery移动，我怀疑打开事件可以帮助我在这里。如果你们已经取得了这样的事情，将是对我很大的帮助（新的jQuery）JqueryUI自动完成结果列表与jquery移动

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 
<script type="text/javascript"> 

$(function() { 
    $("#searchText").autocomplete({ 
     source: '/CRM/SearchResult', 
     minLength: 1, 
     appendTo: "#searchResultList", 
     open: function() {    

     } 
    }); 
}); 

</script> 

<input type="text" name="searchText" id="searchText" /> 
    <ul data-role="listview" id="searchResultList"> 

    </ul>

来源

2011-07-06 Sutikshan Dubey

通过在Firebug的帮助下提取jquermobile标签的准确输出（我不确定这是否是个好主意，但它对我很有用）：

<script type="text/javascript"> 
     $(function() { 
      $("#searchTextBox").change(function (e) { 
       var searchTerm = $("#searchTextBox").val(); 
       if (searchTerm.length == 0) { 
        $('ul li').remove(); 
       } 
       else if (searchTerm.length >= 2) { 
        $('ul li').remove(); 
        $.getJSON(
         '/XYZ/SearchResult', 
         { term: searchTerm }, 
         function (response) { 

          $.each(response, function (index) { 
           var entityID = response[index].id; 
           var displayText = response[index].label; 

           var listItem = ' <li class="ui-btn ui-btn-icon-right ui-li "><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="/XYC/XDetail/' + entityID + '" target="_self" class="ui-link-inherit">' + displayText + '</a></div><span class="ui-icon ui-icon-arrow-r"></span></div></li>'; 

           $(listItem).appendTo("#ui-listview"); 

          }); 

         }); 
       } 
      }); 
     }); 
    </script> 
} 

<div class="ui-input-search"> 
    <input placeholder="Filter items..." data-type="search" class="ui-input-text ui-body-null" 
     id="searchTextBox" width> 
</div> 
<p /> 
<div class="content-primary"> 
    <ul data-role="listview" class="ui-listview" id="ui-listview"> 
    </ul> 
</div>

来源

2011-07-21 05:09:05

你可以做到这一点。您需要提供open回调函数，并且一旦打开自动完成菜单，就会触发此问题。因此你的函数应该做如下的事情。首先，让你的无序列表容器上的手柄：

var list = $('#searchResultList');

...然后遍历搜索结果（$.each()或类似的应该做的）。对于每个结果值，append列表项目为您ul：

list.append('<li>' + YOUR_RESULT_VALUE + '</li>');

...然后最后你会需要刷新列表，以便JQM更新正确的UI：我实现

list.listview('refresh');

来源

2011-07-07 09:54:14 Ben

谢谢本。我试过，但jQuery的手机不按我想要的方式工作，它失去了所有的格式和显示裸列表（和自动完成似乎不工作在iPhone中）:( - 我想结果看起来像 - http：///jquerymobile.com/test/docs/lists/docs-lists.html#/test/docs/lists/lists-search.html使用萤火虫，我从上面的例子中提取输入框，我几乎在那里使用Ajax ... –

jQuery UI自动完成在iOS中使用jQuery Mobile工作得很好 - 我现在将它部署在生产应用中 - 但默认情况下它只是这样做：它在字段中提供自动填充建议。一个页面内列表，所以我只想重新创建该页面中使用的代码。 – Ben

如果你仍然有兴趣，但我怀疑你是

$("#textbox-filter").autocomplete({ 
       minLength: 2, 
       source: '/AutoComplete/XYZ', 
       search: function (event, ui) { 
        $("ul#listview li.ac").remove(); 
       }, 
       open: function (event, ui) { 
        $("ul#listview").listview('refresh'); 
       } 
      }) 
      .data("autocomplete")._renderItem = function (ul, item) { 
       $('<li class="ac"><a href="#one">' + item.value + '</a></li>').appendTo("ul#listview"); 
       return null; 
      };

来源

2012-07-03 01:24:52 Kyle

JqueryUI自动完成结果列表与jquery移动

回答

相关问题