PHPاسکریپت هاسورس کدکامپوننت / کتابخانهمتن باز

ایجاد AutoComplete برای TextBoxبا jQuery

auto complete

در این مقاله نحوه ایجاد AutoComplete (تکمیل کننده خودکار) برای Textbox ها (input های دارای تایپ text) با استفاده از jQuery و jQuery UI را تشریح می کنم

برای ایجاد AutoComplete که به آن Keyword Suggestion هم می گویند، از جیکوئری و jquery ui استفاده می کنیم.
۱- در قسمت head صفحه html به ترتیب اسکریپت های زیر را قرار بدهید:
<script src="http://code.jquery.com/jquery-1.9.0.js">
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js">

۲- یک input با شناسه autocomplete در صفحه قرار بدهید:

 <label for="autocomplete">Select a programming language: </label> 
<input id="autocomplete" /> 

۳- برای ایجاد Auto Complete اسکریپت زیر را بعد از input قرار دهید:

<script>
$( "#autocomplete" ).autocomplete({
            source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
    });
</script>
در اسکریپت بالا، آرایه ای به نام source قرار دارد که هنگام تایپ توسط کاربر، در صورتیکه تشابهی با مقادیر آن وجود داشته باشد، به کاربر پیشنهاد استفاده از آنها را می دهد

نظرات