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

【问题标题】：populating SELECT from XML for live search从 XML 填充 SELECT 以进行实时搜索
【发布时间】：2013-07-08 18:06:29
【问题描述】：

请帮我解决这个问题。我有一个这样的 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 的初学者。

谢谢。

【问题讨论】：

是的。根据教程w3schools.com/php/php_ajax_livesearch.asp，我正在使用 ajax 用 xml 数据填充 div。但是我不能使用箭头键选择值，因为这里给出了 div 而不是下拉菜单。我该如何改变？
您需要大量代码来制作现代 div 驱动的下拉列表。因为您需要添加事件监听器来单击、鼠标滚轮、按键...

标签： php javascript jquery html

【解决方案1】：

这是一种填充<select>的方法

它是为在现代浏览器上工作而编写的。polyfill 需要更多代码。

将 x.xml 替换为搜索 url。

<!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>

【讨论】：

【解决方案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"}

【讨论】：