Question

请帮我解决这个问题。我有一个像这样的xml文件

<ProjectList>
  <ProjectName>AAJ</ProjectName>
  <ProjectName>hjgg</ProjectName>
  <ProjectName>asfasf</ProjectName>
  <ProjectName>qwere</ProjectName>
  <ProjectName>sadaf</ProjectName>
  <ProjectName>asd</ProjectName>
  <ProjectName>asad</ProjectName>
  <ProjectName>wildzike</ProjectName>
  <ProjectName>yahoo</ProjectName>
</ProjectList>

我需要在php中使用搜索框进行实时搜索。我从此链接http://www.w3schools.com/php/php_ajax_livesearch.asp获得了解决方案来创建该搜索框。但是这里不方便，因为没有使用箭头键选择值的选项。我认为使用<select>标记用下拉字段替换搜索文本字段会更好。如何从xml文件中填充数据选择（应该从xml文件匹配），以便我可以选择使用向上和向下箭头键的值。请建议我提供示例代码，因为我是php和Jquery的初学者。

感谢。

Answer 1

这是填充<select>

的方法

它写在现代浏览器上工作.. polyfill需要更多代码。

将 x.xml 替换为搜索网址。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
var
x=function(a,b,c){c=new XMLHttpRequest;c.open('GET',a);c.onload=b;c.send()};
 x('x.xml',function(){
  var
  xml=this.responseXML.firstChild.getElementsByTagName('ProjectName'),
  xmll=xml.length,
  a=[],
  sel=document.createElement('select');
  while(xmll--){
   var txt=xml[xmll].textContent;
   a[xmll]='<option value="'+txt.trim()+'">'+txt+'</option>';
  }
  sel.innerHTML=a.join('');
  document.body.appendChild(sel);
 });
</script>
<body>
</body>
</html>

Answer 2

我将使用Jquery UI自动完成提供一个简洁的解决方案

$("#search").autocomplete({
minglength:2 // Just to prevent many useless requests
source: "livesearch.php"
select : function (e,ui){
window.href=ui.item.val()}

 });

现在是php方面

$q=$_GET["term"]; Note that Jquery sends the search query as GET using term variable

//lookup all links from the xml file if length of q>0
if (strlen($q)>0)
{
$hint="";
// Some Code for hint note that it must return a json or array of json for many results
}
    echo $hint;
?>

Json结构就像那样

{"value":"The value you want","label":"The display name you want to show useless in ur case"}

从XML填充SELECT以进行实时搜索

2 个答案: