2015-05-01 14 views
2

我想复制所选的实时搜索并通过ajax填充文本框名称“oki”。就像谷歌生活搜索。将所选元素从ajax实时搜索复制到文本框

我正在将数据从xml文件中检索到ajax实时搜索。

这里是我的search.html:

<html> 
<head> 
<script> 
function showResult(str) { 
    if (str.length==0) { 
    document.getElementById("livesearch").innerHTML=""; 
    document.getElementById("livesearch").style.border="0px"; 
    return; 
    } 
    if (window.XMLHttpRequest) { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
     document.getElementById("livesearch").innerHTML=xmlhttp.responseText; 

     document.getElementById("livesearch").style.border="1px solid #A5ACB2"; 
    } 
    } 
    xmlhttp.open("GET","livesearch.php?q="+str,true); 
    xmlhttp.send(); 
} 

</script> 

</head> 
<body> 

<form> 
<p id="demo"></p> 
<input name="oki" type="text" size="30" onkeyup="showResult(this.value)"> 
<div id="livesearch"></div> 
</form> 

</body> 
</html> 

我livesearch.php:

<?php 

$xmlDoc=new DOMDocument(); 
$xmlDoc->load("links.xml"); 

$y=$xmlDoc->getElementsByTagName('country'); 

//get the q parameter from URL 
$q=$_GET["q"]; 

//lookup all links from the xml file if length of q>0 
if (strlen($q)>0) { 
    $hint=""; 
    for($i=0; $i<($y->length); $i++) { 


    if ($y->item($i)->nodeType==1) { 
     //find a link matching the search text 
if (strpos(strtolower($y->item($i)->nodeValue), strtolower($q)) === 0) { 

if ($hint=="") {$hint="<a onclick='alert()'>" . $y->item($i)->nodeValue . "</a>"; 
     } else { 
      $hint=$hint . "<br />". 
      $y->item($i)->nodeValue; 
     } 
     } 
    } 
    } 
} 





// Set output to "no suggestion" if no hint was found 
// or to the correct values 
if ($hint=="") { 
    $response="no suggestion"; 
} else { 
    $response=$hint; 
} 

//output the response 
echo $response; 
?> 

我的XML文件:

<?xml version="1.0" encoding="utf-8"?> 
<link> 
<countries> 
    <country code="AF" iso="4">Afghanistan</country> 
    <country code="AL" iso="8">Albania</country> 
    <country code="DZ" iso="12">Algeria</country> 
    <country code="AS" iso="16">American Samoa</country> 
    <country code="AD" iso="20">Andorra</country> 
    <country code="AO" iso="24">Angola</country> 
    <country code="AI" iso="660">Anguilla</country> 
    <country code="AQ" iso="10">Antarctica</country> 
    <country code="AG" iso="28">Antigua And Barbuda</country> 
    <country code="AR" iso="32">Argentina</country> 
    <country code="AM" iso="51">Armenia</country> 
    <country code="AW" iso="533">Aruba</country> 
    <country code="AU" iso="36">Australia</country> 
    <country code="AT" iso="40">Austria</country> 
    <country code="AZ" iso="31">Azerbaijan</country> 
    <country code="BS" iso="44">Bahamas</country> 
    <country code="BH" iso="48">Bahrain</country> 
    <country code="BD" iso="50">Bangladesh</country> 
</countries> 

</link> 

注意 我尝试使用锚与点击,但没有成功

+0

更好地遵循本教程看起来像你..... http://www.w3schools.com/php/php_ajax_php.asp – nifCody

+0

@NifrasIsmail花花公子它没有解释如何将建议复制文本 –

+0

对不起不得到问题。如果你选择一个它显示在文本框中的消息列表,我的undestand里有一个消息列表,我是对的吗? – nifCody

回答

0

你试过select2吗?看起来它有你正在寻找的功能。 https://select2.github.io/

+0

仅限链接的答案因为链接将来可能会死亡而受到极大的阻碍。我建议你用引用来源的引文编辑你的答案。 –