如何使用jquery限制自动完成

时间:2012-10-22 05:28:18

标签: jquery-ui autocomplete

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd">
<!doctype html> 
<html lang="en"> 
<head>
<title>Time</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script> 
  $(function() { var availableTags = [ "Egmore", "Poonamallee High Road", "Purasawalkam", "Spur Tank Road", "MMDA", "NSC Bose Road", "Thambu Chetty Streett", "Pattinapakkam", "Kamarajar Salai", "P.S.Sivasamy Salai", "Central Road", "Jafferkhanpet", "K.K.Nagar", "Post Colony (West Mambalam)", "Saidapet West", "VSM Garden", "Perumal Koil Street", "Kodungaiyur", "Esplanade", "East GT area", "Royapuram", "Sembium", "Madhavaram", "Thiru-Vi-Ka Nagar", "Vyasarpadi", "Perambur", "Toll Gate", "Cherry Road", "Arcot Road", "Valasaravakkam ", "E.D.L", "Injambakkamm ", "Selaiyur", "Choolaimedu", "Kodambakkam", "North Usman Road", "Vadapalani", "Ashok Nagar, Trust Puram", "Madipakkam", "Nolambur", "Padi Industrial Estate", "Perungalathur", "Bharathi Salai", "Valluvar Salai", "Mugalivakkam", "Manapakkam", "Poonamallee High Road", "Ramavaram", "Siruseri Industrial Estate", "Ambattur Industrial Estate", "Mogappair", "Thirumangalam", "Purasawalkam(One Part)", "Doveton(One Part)", "Teynampet(One Part)", "Anna Salai(One Part)", "Khajital Road(One Part)", "Pookadai", "Paris Corner", "Broadway", "Esplanade(One Part)", "Mylapore(Some Area)", "Luz(Some Area)", "T. Nagar(One Part)", "Pandy Bazar", "South Usman Road", "Anna Salai(One Part)", "M.R.C Nagar", "Karpagam Avenue", "Greenways Lane", "Ranimeyammai Tower", "K.V.P Garden", "Srinivasa Avenue", "Anna Salai(One Part)", "Whites Road", "Rukmani Lakshmipathy Salai", "Ethiraj Salai", "Raheja Complex", "Moorthingar Lane", "Kamaraj Salai", "Anna Poonga", "Moolakadai", "Muthamizh Nagar", "Kaattur Lakshmi Nagar", "Sembium(One part)", "Manali", "G.K.M Colony", "S.R.P Colony", "Vyasarpadi Industrial Estate", "G.S.T Road(One part)", "Nehru Nagar", "Kadaperi", "", "", "", "", "", "" ]; $("#tags").autocomplete({ source: function() { var results = $.ui.autocomplete.filter(availableTags, request.term); response(results.slice(0, 10)); } }); 
</script> 
</head>
<body> 
    <center> 
    <form method="post" action="newjsp.jsp" name="index">
      <div class="ui-widget">
         <label for="tags">Enter The Cities/Places: </label> 
         <input id="tags" name="area" /> <input type="submit" value="SEARCH"/> 
      </div> 
    </form> 
    <form action="newjsp.jsp" method="post" name="timeform"> 
       <label name="time"> Search By Time</label> 
       <select id=time name="time" > 
         <option value="8AM10AM">8AM-10AM</option> 
         <option value="10AM12PM">10AM-12PM</option> 
         <option value="12PM2PM">12PM-2PM</option> 
         <option value="2PM4PM">2PM-4PM</option> 
         <option value="4PM6PM">4PM-6PM</option> 
        </select>
        <input type="submit" value="SEARCH"/> 
    </form>
    </center>
 </body> 
</html>

=============================================== =========================

1 个答案:

答案 0 :(得分:0)

这是一个与小提琴相关的问题:http://jsfiddle.net/andrewwhitaker/vqwBP/

Limit results in jQuery UI Autocomplete

$("#auto").autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(myarray, request.term);

        response(results.slice(0, 10));
    }
});

P.S:请下次描述您的问题,将JS脚本格式化为可读