jQuery – Auto Complete

下載位置

HTML 部份

<input type="text" id="test">

jQuery 部份

<script>
  $(function(){
      $("#test").autocomplete({
          lookup:[
              {"value": "name1", "your_define": "define1"},
              {"value": "name2", "your_define": "define2"},
              {"value": "test1", "your_define": "define3"},
              {"value": "test2", "your_define": "define4"}
          ],
          onSelect:function(suggestion){
              console.log(suggestion.value);
              console.log(suggest.your_define);
          }
      })
  });
</script>

新版寫法: 相關網址

  <script>
    $(function(){
        $("#test").autocomplete({
            source:[
                {"value": "name1", "your_define": "define1"},
                {"value": "name2", "your_define": "define2"},
                {"value": "test1", "your_define": "define3"},
                {"value": "test2", "your_define": "define4"}
            ],
            select:(event, ui){
                console.log(ui.item.value);
                console.log(ui.item.your_define);
            }
        })
    });
</script>

效果示範: (沒加任何CSS)

CSS 部份

<style>
    .autocomplete-suggestions {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid #999;
        background: #FFF;
        cursor: default;
        overflow: auto;
        -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
        -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
        box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    }
    .autocomplete-suggestion {
        padding: 2px 5px;
        white-space: nowrap;
        overflow: hidden;
    }
    .autocomplete-no-suggestion {
        padding: 2px 5px;
    }
    .autocomplete-selected {
        background: #F0F0F0;
    }
    .autocomplete-suggestions strong {
        font-weight: bold;
        color: #000;
    }
    .autocomplete-group {
        padding: 2px 5px;
        font-weight: bold;
        font-size: 16px;
        color: #000;
        display: block;
        border-bottom: 1px solid #000;
    }
</style>

效果示範: (加上CSS後)

開始在上面輸入您的搜索詞,然後按回車進行搜索。按ESC取消。

返回頂部