自动完成Jquery，并显示结果

Question

我如何创建搜索，使用json文件的自动完成功能，并在提交值后将结果显示在新页面中，并选择了值数据

这是html文件：

<form action="/dosomething">
<input/>
<button type="submit"></button>
</form>

我的json文件：

    [
        {
           "title": "Stackoverflowsite1",
           "link": "www.stackoverflow.com"
        },
        {
           "title": "Stackoverflowsite2",
           "link": "www.stackoverflow2.com"
        },
        {
           "title": "Stackoverflowsite3",
           "link": "www.stackoverflow3.com"
        }
   ]

我如何解析数据以完成自动填充并在完成后显示结果？ 请帮助，谢谢！

Answer 1

表格将提交您要执行的任何操作。 因此，只需在要填写的字段上调用自动完成功能，定义数据，即可开始比赛。

<form action="/dosomething">
    <input id="fillme" />
    <button type="submit"></button>
</form>



var sourceJSON =  [
        {
           "title": "Stackoverflowsite1",
           "link": "www.stackoverflow.com"
        },
        {
           "title": "Stackoverflowsite2",
           "link": "www.stackoverflow2.com"
        },
        {
           "title": "Stackoverflowsite3",
           "link": "www.stackoverflow3.com"
        }
   ]

$( "#fillme" ).autocomplete({
      minLength: 0,
      source: sourceJSON,
      focus: function( event, ui ) {
        $( "#fillme" ).val( ui.item.title );
        return false;
      },
      select: function( event, ui ) {
        $( "#fillme" ).val( ui.item.title );

        return false;
      }
    }).autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<a>" + item.title+ "</a>" )
    .appendTo( ul );
};