Question

我已经完成了以下代码，但我仍然需要一些帮助来弄清楚如何制作自动填充输入部分，搜索栏以及。

首先我认为我需要制作一个表单并使用提交来获得结果，但是从什么开始我知道我可以简单地使用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中。

感谢您的帮助（尝试插入'搜索'，''字段和其他一些方法没有达到我的目标:(）

Answer 1

这是代码：

<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";
}
}

因此，当有人去搜索时，他们在预先填充的列表中拥有有限数量的选项，并且他们选择的任何一个选项都会将他们带到您的目标页面！我无法承担所有的功劳，但我希望有所帮助！

Jquery自动完成+搜索结果

1 个答案: