XML content:
<? XML version = "1.0" encoding = "UTF-8"?> <Info> <user> <Name> Wang Xiaohu </Name> <sex> male </sex>
HTML content:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">
JS content:
$ (Document ). ready (function (e) {$ (": Text "). change (function () {try {$. ajax ({type: "Get", URL: "XML. XML ", success: function (XML) {$ (XML ). find ("user "). each (function (I) {var name = $ (this ). children ("name"); var name_value = $ (this ). children ("name "). text (); var sex_value = $ (this ). children ("sex "). text (); var habit_value = $ (this ). children ("habit "). text (); var text = $ (": Text "). val (); if ($ (this ). children ("Name: Contains ('" + TEXT + "')"). length> 0) {alert ("name:" + name_value + ", Gender:" + sex_value + ", hobbies:" + habit_value );}});}});} catch (e) {alert (e );}});});
If you want to write a character similar to Baidu for search, the effect of the following character will be put below
A prompt is displayed when the input character is searched in imitation of Baidu.
XML section:
<? XML version = "1.0" encoding = "UTF-8"?> <Info> <user> <Name> Wang Xiaohu </Name> <sex> male </sex>
HTML section:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">
JS section:
$(document).ready(function(e) { $(":text").keyup(function(){try{$("#show").html("");$.ajax({type:"GET",url:"xml.xml",success:function(xml){$(xml).find("user").each(function(i) { var name=$(this).children("name");var name_value=$(this).children("name").text();var sex_value=$(this).children("sex").text();var habit_value=$(this).children("habit").text();var text=$(":text").val();if($(this).children("name:contains('"+text+"')").length>0){$("#show").append("<div class='small'>" +name_value+"</div>");} });$("#show").append("<div class='small'></div>");}});}catch(e){alert(e);}});});