java_前端_autocomplete_搜索框自动匹配提示

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

效果图：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> title </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <style>

    body{

        font: 62.5% "Trebuchet MS", sans-serif;

        margin: 50px;

    }

    .demoHeaders {

        margin-top: 2em;

    }

    #dialog-link {

        padding: .4em 1em .4em 20px;

        text-decoration: none;

        position: relative;

    }

    #dialog-link span.ui-icon {

        margin: 0 5px 0 0;

        position: absolute;

        left: .2em;

        top: 50%;

        margin-top: -8px;

    }

    #icons {

        margin: 0;

        padding: 0;

    }

    #icons li {

        margin: 2px;

        position: relative;

        padding: 4px 0;

        cursor: pointer;

        float: left;

        list-style: none;

    }

    #icons span.ui-icon {

        float: left;

        margin: 0 4px;

    }

    .fakewindowcontain .ui-widget-overlay {

        position: absolute;

    }

    select {

        width: 200px;

    }

    </style>

  <link href="jquery-ui.css" rel="stylesheet">

  <script src="external/jquery/jquery.js"></script>

  <script src="jquery-ui.js"></script>

 </HEAD>

 <BODY>

<!-- Autocomplete -->

<h2 class="demoHeaders">Autocomplete</h2>

<div>

    <input id="autocomplete" title="type &quot;a&quot;">

</div>

 </BODY>

</HTML>

  <script>

    var availableTags = [

    "苹果",

    "ActionScript",

    "AppleScript",

    "Asp",

    "BASIC",

    "C",

    "C++",

    "Clojure",

    "COBOL",

    "ColdFusion",

    "Erlang",

    "Fortran",

    "Groovy",

    "Haskell",

    "Java",

    "JavaScript",

    "Lisp",

    "Perl",

    "PHP",

    "Python",

    "Ruby",

    "Scala"

];

$( "#autocomplete" ).autocomplete({

    source: availableTags

});

  </script>