0

我有以下代码工作，但我仍然需要一些帮助来弄清楚如何使自动完成输入部分成为搜索栏。

首先我以为我需要制作一个表单并使用提交来获取结果，但据我了解，我可以简单地使用 jquery 的“搜索”方法/事件来完成它并省去麻烦想，我没有成功

这是我得到的：

<div id="search">
    <input id="project" />
</div>

作为 html

$( "#project" ).autocomplete({
    minLength: 0,
    source: projects,
    focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
    },
    select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        return false;
    },
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<a>" + item.label +  "</a>" )
    .appendTo( ul );
};

作为jquery，我已经看到了一些类似的问题，但是我没有从我所做的事情中得到正确的答案，自动完成列表在输入单词时是可见的，但我想要发生的是当用户按下回车键时自动完成列表中的结果将显示在页面另一部分的某个 div 中。

感谢您的帮助（尝试插入“搜索”、“”字段和其他一些方法都没有达到我的目标:()

4

1 回答 1

0

这是代码：

<div id="search">
  <input list="results" id="project" onkeydown="if (event.keyCode == 13) { checkInput(this.value); return false; }" />
</div>

可用的结果...

<datalist id="results">
  <option>Demo</option>    
  <option>Example</option>
  <option>pizza</option>
</datalist>

最后是javascript

function checkInput(searchQuery)
{
if(searchQuery=="Demo")
{
    window.location = "Demo.html";
}
else if(searchQuery == "Example")
{
    window.location = "Example.html";
}
else if(searchQuery == "Pizza")
{
    window.location = "Pizza.html";
}
else
{
    window.location = "noresult.html";
}
}

因此，当有人去搜索时，他们在预填充列表中的选项数量有限，而他们选择的任何一个选项都会将他们引导到您的目标页面！我不能接受所有的功劳，但我希望这会有所帮助！

于 2014-01-20T13:43:28.423 回答