2012-10-03 107 views
0

這是我的JQuery腳本代碼。在JQuery UI自動完成中添加一些功能

<script type="text/javascript"> 

     var months = ['01 - January', '02 - February', '03 - March', '04 - April', '05 - May', '06 - June', '07 - July', '08 - August', '09 - September', '10 - October', '11 - November', '12 - December'];  

$().ready(function() { 

    $("#month").autocomplete(months,{minChars: 0,max: 12,autoFill: true,mustMatch: true,matchContains: false,scrollHeight: 220, 
    formatItem: function(data, i, total) 
    { 
      // don't show the current month in the list of values (for whatever reason) 
      if (data[0] == months[new Date().getMonth()]) 
       return false; 
      return data[0]; 
    } 
    }); 


    $("#clear").click(function() { 
     $(":input").unautocomplete(); 
    }); 
}); 
</script> 

</head> 
<body> 
<div id="content"> 

    <form autocomplete="off"> 
     <p> 
      <label>Single Month:</label> 
       <input type="text" id="month" /> 

     </p> 
     <input type="submit" value="Submit" /> 
    </form> 
</div> 
</body> 

現在我正在輸入一個密鑰'01'它只在't'列表中選擇'01 - 1月'。如果我通過鼠標單擊或鍵入Enter鍵選擇該選項,它將顯示在文本框中。但我需要在輸入字段中僅顯示月份代碼。在列表框中,我只能顯示月份代碼和月份描述。我不想在輸入框中顯示月份描述。 另一個我需要顯示箭頭按鈕來顯示列表。我怎樣才能做到這一點 ?

+0

嘗試看到這是它的某種不同的代碼,但你想要做什麼http://www.w3schools.com/php/php_ajax_livesearch.asp相同的概念 –

回答

1

請參閱this fiddle。我還沒有添加所有的月份。 :)但這個想法是將一個數組中的兩部分數據傳遞給自動完成小部件。該自動完成構件預計與無論是在陣列格式的數據源:含有一個標籤屬性,值屬性,或兩者

  • 簡單字符串

    • 對象中的值

    要添加「下拉」箭頭,請參閱jQuery文檔中的this sample。這是相當長的,但一旦你完成,看起來非常好。