jquery 查找表格里的input_jquery列表文字input文本框输入关键词查找表单代码

特效描述：列表文字表单 文本框输入 关键词查找表单。

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

jQuery关键词查找元素高亮代码

• 伟大的吉萨金字塔

  The Great Pyramid of Giza (also known as the Pyramid of Khufu or the Pyramid of Cheops) is the oldest and largest of the three pyramids in the Giza Necropolis bordering what is now El Giza, Egypt. It is the oldest of the Seven Wonders of the Ancient World, and the only one to remain largely intact.

• 巴格达空中花园

  The Hanging Gardens of Babylon were one of the Seven Wonders of the Ancient World, and the only one whose location has not been definitely established.

  The Hanging Gardens were a distinctive feature of ancient Babylon. They were a great source of pride to the people, and were often described in accounts written by visitors to the city. Possibly built by King Nebuchadnezzar II in 600 BC, the gardens are believed to have been a remarkable feat of engineering: an ascending series of tiered gardens containing all manner of trees, shrubs, and vines. The gardens were said to have looked like a large green mountain constructed of mud bricks, rising from the center of the city.

• 第九站长

  The Statue of Zeus at Olympia was a giant seated figure, about 13 m (43 ft) tall, made by the Greek sculptor Phidias around 435 BC at the sanctuary of Olympia, Greece, and erected in the Temple of Zeus there. A sculpture of ivory plates and gold panels over a wooden framework, it represented the god Zeus sitting on an elaborate cedar wood throne ornamented with ebony, ivory, gold and precious stones. It was regarded as one of the Seven Wonders of the Ancient World until its eventual loss and destruction during the 5th century AD. No copy of the statue has ever been found, and details of its form are known only from ancient Greek descriptions and representations on coins.

• 阿耳忒弥斯神庙

  The Temple of Artemis or Artemision (Greek: Ἀρτεμίσιον, Turkish: Artemis Tapınağı), also known less precisely as the Temple of Diana, was a Greek temple dedicated to the goddess Artemis and is one of the Seven Wonders of the Ancient World. It was located in Ephesus (near the modern town of Selçuk in present-day Turkey), and was completely rebuilt three times before its eventual destruction in 401. Only foundations and sculptural fragments of the latest of the temples at the site remain.

• Mausoleum at Halicarnassus

  The Mausoleum at Halicarnassus or Tomb of Mausolus (Persian: آرامگاه هالیکارناسوس‎; Modern Greek: Μαυσωλείο της Αλικαρνασσού; Turkish: Halikarnas Mozolesi) was a tomb built between 353 and 350 BC at Halicarnassus (present Bodrum, Turkey) for Mausolus, a satrap in the Persian Empire, and Artemisia II of Caria, who was both his wife and his sister. The structure was designed by the Greek architects Satyros and Pythius of Priene.

• Colossus of Rhodes

  The Colossus of Rhodes /roʊdz/ (Ancient Greek: ὁ Κολοσσὸς Ῥόδιος ho Kolossòs Rhódios) was a statue of the Greek titan-god of the sun Helios, erected in the city of Rhodes, on the Greek island of the same name, by Chares of Lindos in 280 BC. It is one of the Seven Wonders of the Ancient World. It was constructed to celebrate Rhodes' victory over the ruler of Cyprus, Antigonus I Monophthalmus, whose son unsuccessfully besieged Rhodes in 305 BC. Before its destruction in the earthquake of 226 BC, the Colossus of Rhodes stood over 30 metres (98 feet) high, making it one of the tallest statues of the ancient world.

• Lighthouse of Alexandria

  The Lighthouse of Alexandria, sometimes called the Pharos of Alexandria (/ˈfɛərɒs/; Ancient Greek: ὁ Φάρος τῆς Ἀλεξανδρείας), was a lighthouse built by the Ptolemaic Kingdom between 280 and 247 BC which was between 393 and 450 ft (120 and 137 m) tall. It was one of the tallest man-made structures in the world for many centuries, and was regarded as one of the Seven Wonders of the Ancient World. Badly damaged by three earthquakes between AD 956 and 1323, it then became an abandoned ruin. It was the third longest surviving ancient wonder (after the Mausoleum at Halicarnassus and the extant Great Pyramid of Giza) until in 1480 the last of its remnant stones were used to build the Citadel of Qaitbay on the site. In 1994, French archaeologists discovered some remains of the lighthouse on the floor of Alexandria's Eastern Harbour.

No matches were found… Try “giza”.

'use strict';

// search & highlight

;( function( $, window, document, undefined )

{

var $container = $( '.faq' );

if( !$container.length ) return true;

var $input= $container.find( 'input' ),

$notfound= $container.find( '.faq__notfound' ),

$items= $container.find( '> ul > li' ),

$item= $(),

itemsIndexed= [];

$items.each( function()

{

itemsIndexed.push( $( this ).text().replace( /\s{2,}/g, ' ' ).toLowerCase() );

});

$input.on( 'keyup', function( e )

{

if( e.keyCode == 13 ) // enter

{

$input.trigger( 'blur' );

return true;

}

$items.each( function()

{

$item = $( this );

$item.html( $item.html().replace( /([^/gi, '$1' ) );

});

var searchVal = $.trim( $input.val() ).toLowerCase();

if( searchVal.length )

{

for( var i in itemsIndexed )

{

$item = $items.eq( i );

if( itemsIndexed[ i ].indexOf( searchVal ) != -1 )

$item.removeClass( 'is-hidden' ).html( $item.html().replace( new RegExp( searchVal+'(?!([^)', 'gi' ), '$&' ) );

else

$item.addClass( 'is-hidden' );

}

}

else $items.removeClass( 'is-hidden' );

$notfound.toggleClass( 'is-visible', $items.not( '.is-hidden' ).length == 0 );

});

})( jQuery, window, document );

// toggling items on title press

;( function( $, window, document, undefined )

{

$( document ).on( 'click', '.faq h2 a', function( e )

{

e.preventDefault();

$( this ).parents( 'li' ).toggleClass( 'is-active' );

});

})( jQuery, window, document );

// auto-show item content when show results reduces to single

;( function( $, window, document, undefined )

{

var $container = $( '.faq' );

if( !$container.length ) return true;

var $input= $container.find( 'input' ),

$items= $container.find( '> ul > li' ),

$item= $();

$input.on( 'keyup', function()

{

$item = $items.not( '.is-hidden' );

if( $item.length == 1 )

$item.addClass( 'js--autoshown is-active' );

else

$items.filter( '.js--autoshown' ).removeClass( 'js--autoshown is-active' );

});

})( jQuery, window, document );