جستجو در جاوا اسکریپت

سوال

سلام،

من در برنامه یک فرم دارم که شامل یک تکست باکس برای گرفتن نام کشورهای مختلف از کاربر و یک دکمه برای اضافه کردن نام این کشورها به لیست هست.نیاز به یک تابع برای سرچ در این لیست دارم.بطوری که به عنوان مثال اگر لیست من شامل کشورهای Iran,Japan,Iran,Spain هست، وقتی دکمه i در تکست باکس مربوط به جستجو تایپ میشه، کشورهای iran و iraq در لیست نمایش داده بشن. این کدی هست که من استفاده کردم ولی وقتی داخل سرچ شروع به نوشتن میکنم هیچ تغییری بوجود نمیاد.

}()function myFunction
var input, filter, ul, li, a, i, txtValue
input=document.getElementById('searchBox')
()filter = input.value.toUpperCase
ul = document.getElementById("elements-list")
li = ul.getElementsByTagName("li")
} for (i = 0; i < li.length; i++)
    a = li[i].getElementsByTagName("li")[0]
    txtValue = a.textContent || a.innerText
    }if (txtValue.toUpperCase().indexOf(filter) > -1)
       " "= li[i].style.display
    } else {
     " li[i].style.display = "none
    {
  {

 

در حال بررسی 0
2020-09-02T10:06:20+03:30 1 پاسخ ها کاربر تازه 0

پاسخ ( 1 )

  1. احمد آخوندی
    0
    2020-09-02T17:57:56+03:30
    پاسخ

    سلام

    نیازی نیست که خودتون دستی بنویسید!

    در قالبتون حتما از BootStarp استفاده میکنید، یک نمونه کد میزارم که به 5 متد مختلف نوشته شده، هر کدوم رو خواستید میتونید استفاده کنید

    <!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap: Dropdown Select with ajax Live search</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" >
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
	</head>
	<body>
		<div class="container shadow" style="padding: 5rem; margin-top: 2rem;">
			<div class="row">
				<div class="col-lg-12">
				<h4> www.beporsam.ir </h4>
					<div class="form-group">
						<label for="exampleDropdown">#1 # Dropdown Select with "data-live-search" </label>
						<select data-live-search="true" class="form-control selectpicker">
							<option>Mango</option>
							<option>Orange</option>
							<option>Lychee</option>
							<option>Pineapple</option>
							<option>Apple</option>
							<option>Banana</option>
							<option>Grapes</option>
							<option>Water Melon</option>
						</select>
					</div> 
					<div class="form-group">
						<label for="exampleDropdown">#2 Dropdown Select with "title" attribute</label>
						<select data-live-search="true" title="Please select fruit" class="form-control selectpicker">
							<option>Mango</option>
							<option>Orange</option>
							<option>Lychee</option>
							<option>Pineapple</option>
							<option>Apple</option>
							<option>Banana</option>
							<option>Grapes</option>
							<option>Water Melon</option>
						</select>
					</div>
					<div class="form-group">
						<label for="exampleDropdown">#3 Dropdown Select with "data-live-search-placeholder" attribute</label>
						<select data-live-search="true" title="Please select fruit" data-live-search-placeholder="Search Fruit" class="form-control selectpicker">
							<option>Mango</option>
							<option>Orange</option>
							<option>Lychee</option>
							<option>Pineapple</option>
							<option>Apple</option>
							<option>Banana</option>
							<option>Grapes</option>
							<option>WaterMelon</option>
						</select>
					</div>
					<div class="form-group">
						<label for="exampleDropdown">#4 Dropdown Select with "Multiple" select attribute</label>
						<select data-live-search="true" title="Please select fruit" class="form-control selectpicker" multiple>
							<option>Mango</option>
							<option>Orange</option>
							<option>Lychee</option>
							<option>Pineapple</option>
							<option>Apple</option>
							<option>Banana</option>
							<option>Grapes</option>
							<option>Water Melon</option>
						</select>
					</div>
					<div class="form-group">
						<label for="exampleFormControlSelect2">#5 Dropdown Select using "data-none-results-text" attribute</label>
						<select data-live-search="true" data-none-results-text="I found no results" title="Please select fruit" class="form-control selectpicker">
							<option>Mango</option>
							<option>Orange</option>
							<option>Lychee</option>
							<option>Pineapple</option>
							<option>Apple</option>
							<option>Banana</option>
							<option>Grapes</option>
							<option>Water Melon</option>
						</select>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

    موفق باشید.

ارسال یک پاسخ