Skip to content

hkevin01/JQuery-AutoComplete-Cities

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jQuery AutoComplete Cities

A lightweight and customizable jQuery plugin for creating autocomplete functionality with city names. This plugin provides an elegant way to add autocomplete features to input fields, perfect for location-based applications.

🚀 Features

  • Fast & Responsive: Minimal delay with efficient caching
  • Customizable: Configurable delay, minimum characters, and display options
  • Lightweight: Pure jQuery implementation with no heavy dependencies
  • Easy Integration: Simple setup with existing forms
  • Cross-browser Compatible: Works across all modern browsers

📦 Installation

Manual Installation

  1. Download the project files
  2. Include jQuery and the autocomplete plugin in your HTML:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.autocomplete.js"></script>
<script src="func_auto_complete.js"></script>

CDN (coming soon)

<script src="https://cdn.jsdelivr.net/gh/hkevin01/JQuery-AutoComplete-Cities@master/jquery.autocomplete.js"></script>

🛠️ Quick Start

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="jquery.autocomplete.js"></script>
</head>
<body>
    <input type="text" id="city-input" placeholder="Enter city name...">
    
    <script>
        $("#city-input").autocomplete("autocomplete.php", {
            delay: 10,
            minChars: 2,
            maxItemsToShow: 8,
            autoFill: true
        });
    </script>
</body>
</html>

Advanced Configuration

$("#start").autocomplete("autocomplete.php", {
    delay: 10,           // Delay in milliseconds
    zIndex: 9999,        // Z-index for dropdown
    minChars: 2,         // Minimum characters to trigger
    matchSubset: 1,      // Match subsets
    matchContains: 1,    // Match contains
    maxItemsToShow: 8,   // Maximum items in dropdown
    cacheLength: 10,     // Cache length
    autoFill: true       // Auto-fill first match
});

📖 Documentation

For detailed documentation, API reference, and advanced examples, visit our Documentation.

🎯 Browser Support

Browser Version
Chrome ✅ Latest
Firefox ✅ Latest
Safari ✅ Latest
Edge ✅ Latest
IE ⚠️ 11+

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/new-feature
  3. Commit your changes: git commit -am 'Add new feature'
  4. Push to the branch: git push origin feature/new-feature
  5. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🐛 Issues & Support

📈 Roadmap

  • TypeScript definitions
  • React wrapper component
  • Vue.js plugin
  • Angular directive
  • ES6 module support
  • CDN distribution

⭐ Star History

If you find this project useful, please consider giving it a star!


Made with ❤️ by hkevin01

About

JQuery AutoComplete text field for city names

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors