jQuery Mobile Autocomplete [英] jQuery Mobile Autocomplete

问题描述

我正在使用ASP.NET MVC开发一个应用程序。在这里，我使用jquery mobile 1.0版本进行自动完成。可以提供一些示例，例如如何在javascript文件中为自动完成分配数据。 />
我希望下拉列表在焦点上可见。

如果我得到了这个例子，这将是gud。



提前感谢你

解决方案

jQuery Mobile Autocomplete



使用本地数据： -



HTML

 <   ul     data-role   =  listview     data-filter   =  true    data-filter-reveal   =  true    data-filter-placeholder  < span class =code-keyword> = 搜索汽车...... >  
 <   li  >  <   a     href   = ＃ >  Acura <   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃  > 奥迪<   / a  >  <   / li  >  
 <   li  >  <   a  < span class =code-attribute>   href   = ＃ > 宝马<   / a  >  <   / li  >  
 <   li  >  <   a     href   = < span class =code-keyword>＃ > 凯迪拉克<   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > 克莱斯勒<  < span class =code-leadattribute> / a  >  <   / li  >  
 <  < span class =code-leadattribute> li  >  <   a     href   = ＃ > 道奇< ;   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > 法拉利<   / a  >  <   / li  >  
 <   li  >   &L t;   a     href   = ＃ > 福特< span class =code-keyword><   / a  >  <   / li  >  
 < span class =code-keyword><   li  >  <   a     href   = ＃ >  GMC <   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > ; 本田<   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ >  Hyundai <   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > 英菲尼迪<   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃  >  Jeep <   / a  >  <   / li  >  
 <   li  >  <   a  < span class =code-attribute>   href   = ＃ >  Kia <   / a  >  <   / li  >  
 <   li  >  <   a     href   = < span class =code-keyword>＃ >  Lexus <   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > 迷你<  < span class =code-leadattribute> / a  >  <   / li  >  
 <  < span class =code-leadattribute> li  >  <   a     href   = ＃ > 日产< ;   / a  >  <   / li  >  
 <   li  >  <  < span class =code-leadattribute> a     href   = ＃ > 保时捷<   / a  >   <   / li  >  
 <   li  >  < ;   a     href   = ＃ >  Subaru <   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > 丰田<   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > ;  Volkswagen <   / a  >  <   / li  >  
 <   li  >  <   a    < span class =code-attribute> href   = ＃ >  Volvo <   / a  >  <   / li  >  
 <   / ul  >  

演示： http://jsfiddle.net/o22swr9g/ [ ^ ]



远程数据： -



HTML

 <   h3  > 全球城市&   / h3  >  
 <   p  > 输入后至少三个字符自动完成功能将显示所有可能的匹配。<   / p  >  
 <   ul     id   = 自动填充    data-role   =  listview    data-inset   =  t rue    data-filter   =  true    data-filter-placeholder   = 查找城市......    data-filter-theme   =  d  >  <   / ul  >  

CSS

。 ui-listview-filter-inset  {
  margin-top  ：  0;  
} 

JS

（ document ）.on （ pageinit， ＃myPage， function （）{

（ ＃autocomplete）。on（ listviewbeforefilter， function （e，data）{
var

I am developing an application using ASP.NET MVC .In,this i am using jquery mobile 1.0 version for the autocomplete .Can you please provide some examples like how to assign a data in the javascript file for the autocomplete.
I want the dropdown list to be visible on focus of it.
It will be gud if i got the example.

Thanking you in advance

解决方案

jQuery Mobile Autocomplete

With Local Data:-

HTML

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Chrysler</a></li>
    <li><a href="#">Dodge</a></li>
    <li><a href="#">Ferrari</a></li>
    <li><a href="#">Ford</a></li>
    <li><a href="#">GMC</a></li>
    <li><a href="#">Honda</a></li>
    <li><a href="#">Hyundai</a></li>
    <li><a href="#">Infiniti</a></li>
    <li><a href="#">Jeep</a></li>
    <li><a href="#">Kia</a></li>
    <li><a href="#">Lexus</a></li>
    <li><a href="#">Mini</a></li>
    <li><a href="#">Nissan</a></li>
    <li><a href="#">Porsche</a></li>
    <li><a href="#">Subaru</a></li>
    <li><a href="#">Toyota</a></li>
    <li><a href="#">Volkswagen</a></li>
    <li><a href="#">Volvo</a></li>
</ul>

Demo Here: http://jsfiddle.net/o22swr9g/[^]

With Remote Data:-

HTML

<h3>Cities worldwide</h3>
<p>After you enter at least three characters the autocomplete function will show all possible matches.</p>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d"></ul>

CSS

.ui-listview-filter-inset {
    margin-top: 0;
}

JS

( document ).on( "pageinit", "#myPage", function() {

( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) { var

这篇关于jQuery Mobile Autocomplete的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！