https://ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/js/search.js?v=1.0

1const searchApp = new Vue({
2	el: '#searchApp',
3	data:{
4		searchKeyword: '',
5		searchCats: '',
6	},
7	mounted: function () {
8		initCustomDropdowns('.custom-dropdown-wrapper-search');
9	},
10	methods: {
11		search: function () {
12			const v = this;
13			if(!v.searchKeyword) {
14				toastr.warning('إدخال كلمة البحث');
15				return;
16			}
17			location.href= `/ar/search-result?keyword=${v.searchKeyword}`
18			/*if(v.searchCats === ''){
19				toastr.warning('إختيار مجال البحث');
20				return;
21			}
22		    switch (v.searchCats) {
23		        case '1': // site
24		            break;
25		        case '2': // courses
26		            location.href = `/ar/training/#/courses?title=${v.searchKeyword}&priceFilter=50000,0`;
27		            if(location.href.includes('/ar/training/#/courses')) location.reload();
28		            break;
29		        case '3': // publications
30		            location.href = `/ar/publications/#/books?keyword=${v.searchKeyword}`;
31		            if(location.href.includes('/ar/publications/#/books')) location.reload();
32		            break;
33		    }*/
34		},
35		enableScroll: function () {
36			document.body.style.overflowY = 'auto';
37		},
38	},
39	template: `
40<div class="modal" id="searchModal" tabindex="-1" aria-hidden="false" data-bs-backdrop="static" data-bs-keyboard="false">
41  <div class="modal-dialog modal-dialog-centered">
42    <div class="modal-content">
43      <div class="modal-header">
44        <div class="modal-title fs-5" >البحث</div>
45        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="enableScroll"></button>
46      </div>
47      <div class="modal-body">
48      	<div class="mb-3">
49      		<label class="form-label" for="searchKeyword">كلمة البحث</label>
50      		<input id="searchKeyword" class="form-control" type="text" placeholder="كلمة البحث" v-model="searchKeyword" >
51      	</div>
52      	<!--
53        <div class="form-group position-relative">
54            <div class="d-flex">
55                <label for="searchCats" class="form-label">مجال البحث</label>
56            </div>
57            <select name="searchCats" id="searchCats" class="form-select d-none"v-model="searchCats">
58                <option value="2">البرامج التدريبية</option>
59	        	<option value="3">الإصدارات </option>
60	        </select>
61            <div class="dropdown custom-dropdown-wrapper-search">
62                <button
63                    class="form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center"
64                    type="button" data-bs-toggle="dropdown" aria-expanded="false">
65                    <span class="selected-text">اختر مجال البحث</span>
66                </button>
67                <ul class="dropdown-menu dropdown-menu-end w-100"
68                    style="max-height: 500px; overflow-y: auto;">
69                    <li>
70                        <span class="dropdown-item active first-item" href="javascript:void(0);" data-value="">اختر مجال البحث</span>
71                    </li>
72                    <li>
73                        <span class="dropdown-item" href="javascript:void(0);" data-value="2">البرامج التدريبية</span>
74                    </li>
75                    <li>
76                        <span class="dropdown-item" href="javascript:void(0);" data-value="3">الإصدارات </span>
77                    </li>
78                </ul>
79            </div>
80        </div>-->
81      </div>
82      <div class="modal-footer">
83        <button type="button" class="tp-link tp-link-Primary" @click="search">
84        	البحث
85        </button>
86      </div>
87    </div>
88  </div>
89</div>	`
90});
91
92function openSearchModal(){
93	$('#searchModal').modal('show');
94}