Question

我正在实施一个搜索表单，在您开始输入时显示建议，但无法使其工作。问题是，当您开始输入时，它不会显示任何建议。你能帮我把代码搞定吗？非常感谢！

这是代码：

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div><input id="autocomplete" type="text"></div>




<script>
$("input#autocomplete").autocomplete({
source: [ 
{ id : "Google", value : "Google"},
{ id : "Yahoo", value : "Yahoo"},
],
minLength: 1,
open: function(event, ui) { 
$("ul.ui-autocomplete").unbind("click");
var data = $(this).data("autocomplete");
console.log(data);
for(var i=0; i<=data.options.source.length-1;i++)
{
                                    var s = data.options.source[i];
                                    $("li.ui-menu-item a:contains(" + s.value + ")").attr("href", "/" + s.id);
                                  }

                                } 

    });

    /*
    $("input#autocomplete").bind("autocompleteselect", function(event, ui) { 
        //alert(ui.item.id + ' - ' +  ui.item.value); 
        //document.location.href = ui.item.id + '/' + ui.item.value;
        //event.preventDefault; 
        } );
    */
    </script>

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=="Home")
{
    window.location = "Home.html";
}
else if(searchQuery == "Contact")
{
    window.location = "Contact.html";
}
else if(searchQuery == "Sitemap")
{
    window.location = "Sitemap.html";
}
else
{
    window.location = "noresult.html";
}
}

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

无法使自动填充搜索表单生效

1 个答案: