cari
Rumahhujung hadapan webhtml tutorialjQuery的搜索关键词自动匹配插件_html/css_WEB-ITnose

  相信许多人都会用过搜索栏自动匹配关键词的功能,无论是像google的专业搜索引擎,还是普通的网站,现在许多都用上了这种关键词匹配技术,本文介绍的用jQuery实现的关键词匹配技术,当然要整合到自己的系统中还需要链接后台的代码。

  在现在的Web设计中,提高用户体验是企业最为注重的内容之一。在搜索表单中,根据输入的部分内容进行关键字匹配提示功能,就是最直观和常用的交互体验,类似功能已经被多数的互联网网站应用。例如Google的搜索框效果如下:

这里介绍一个jQuery实现搜索关键字自动匹配提示方法。jQuery AutoComplete 是一个基于jQuery实现搜索关键词自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用;兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流浏览器。

演示效果:http://www.devbridge.com/projects/autocomplete/jquery/#demo

下面是具体的使用方法:

1,使用设置

首页,要把插件的js代码嵌入到你自己的项目中去。

1

2

script >

script >

2,使用方法

为要实现自动匹配提示的 input 表单添加 AutoComplete 功能。

1

初始化 AutoComplete 对象,确保正确加载 DOM 对象,否则IE下的用户可能会出现错误。

1

2

3

4

5

6

7

8

9

10

11

12

$( '#query' ).autocomplete({

         serviceUrl: 'service/autocomplete.ashx' , // Page for processing autocomplete requests

         minChars: 2, // Minimum request length for triggering autocomplete

         delimiter: /(,|;)\s*/, // Delimiter for separating requests (a character or regex)

         maxHeight: 400, // Maximum height of the suggestion list, in pixels

         width: 300, // List width

         zIndex: 9999, // List's z-index

         deferRequestBy: 0, // Request delay (milliseconds), if you prefer not to send lots of requests while the user is typing. I usually set the delay at 300 ms.

         params: { country: 'Yes '}, // Additional parameters

         onSelect: function(data, value){ }, // Callback function, triggered if one of the suggested options is selected,

         lookup: [' January ', ' February ', ' March'] // List of suggestions for local autocomplete

     });

根据文本表单中的输入信息,进行关键字提示匹配。

1

2

3

4

5

{

     query: 'Li' , // Original request

     suggestions:[ 'Liberia' , 'Libyan Arab Jamahiriya' , 'Liechtenstein' , 'Lithuania' ], // List of suggestions

     data:[ 'LR' , 'LY' , 'LI' , 'LT' ] // Optional parameter: list of keys for suggestion options; used in callback functions.

  }

jQuery AutoComplete 插件支持 on/off功能,从而控制效果的开关。

1

2

3

4

var ac = $( '#query' ).autocomplete({ /*parameters*/ });

     ac.disable();

     ac.enable();

     ac.setOptons({ zIndex: 1001 });

3,设置表现样式

最后,用div和css美化表现效果。

1

2

3

4

5

6

7

8

Li strong >beria div >

Li strong >byan Arab Jamahiriya div >

Li strong >echtenstein div >

Li strong >thuania div >

div >

div >

1

2

3

4

5

.autocomplete-w 1 { background : url (img/shadow.png) no-repeat bottom right ; position : absolute ; top : 0px ; left : 0px ; margin : 6px 0 0 6px ; /* IE6 fix: */ _background : none ; _margin : 1px 0 0 0 ; }

.autocomplete { border : 1px solid #999 ; background : #FFF ; cursor : default ; text-align : left ; max-height : 350px ; overflow : auto ; margin : -6px 6px 6px -6px ; /* IE6 specific: */ _height : 350px ; _margin : 0 ; _overflow-x: hidden ; }

.autocomplete .selected { background : #F0F0F0 ; }

.autocomplete div { padding : 2px 5px ; white-space : nowrap ; overflow : hidden ; }

.autocomplete strong { font-weight : normal ; color : #3399FF ; }

jQuery AutoComplete 插件官方链接

插件介绍: www.devbridge.com/projects/autocomplete/jquery/

插件下载: www.devbridge.com/projects/autocomplete/jquery/#download

这里还有一种基于MooTools框架的关键字自动匹配提示方法:

MooTools: www.ajaxdaddy.com/mootools-autocomplete.html

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
HTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuHTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuApr 18, 2025 am 12:09 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.

Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebMasa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebApr 17, 2025 am 12:12 AM

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganHTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

HTML: Adakah bahasa pengaturcaraan atau yang lain?HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.

HTML: Membina struktur laman webHTML: Membina struktur laman webApr 14, 2025 am 12:14 AM

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

Dari teks ke laman web: Kekuatan HTMLDari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AM

HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

Memahami HTML, CSS, dan JavaScript: Panduan PemulaMemahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML: Penstrukturan Kandungan WebPeranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.