Level 75
LIKE Le%
Apr 2, 2020
7
Level 6
How to return query search with wildcard?
I have a page where it shows product categories of all the items. So for example, for lightings, my page will be like below:
My Featured categories:
LED Wall Lights Office Light Table Light
My featured deals(contains subcategories):
led-light-1 led-light-2 wall-light-1 office-light-1 office-light-2 office-light-3 .......
You get the idea. It will show all the items available under those parent categories. I have a search bar where I can search and filter it to display the results that I want. So for example, if I enter LED, the featured deals will only show LED items.
So far, I implemented this using jquery ajax and it works as intended. Though I want to improve it by allowing wildcard query search which means if I enter LE on the search bar, it should also return all the LED Items.
My code:
<div class="row pb-4">
<div class="col-12 mb-1">
<h3 class="text-muted">{{ $category->name }} <small>(WIP)</small></h3>
</div>
</div>
@if($childCategories->count() > 0)
<div class="row pb-1">
<div class="col-12 mb-1">
<h3 class="text-dark font-weight-bold">Featured Categories</h3>
<hr>
</div>
</div>
<!-- Child Categories -->
<div class="row custom-mb-5">
@foreach($childCategories as $childCategory)
@if($childCategory->childCategories->count() != 0)
<div class="col-6 col-md-2 text-center">
<div class="animated-category-container">
<div class="animated-category-image-container">
<img src="{{ asset('storage/' . $childCategory->image->path . '/' . $childCategory->image->filename) }}" alt="{{ $childCategory->name }}">
<p>{{ $childCategory->name }}</p>
</div>
<div class="animated-category-list-container">
<hr class="w-50 mt-1 mb-1">
<ul class="list-unstyled">
@foreach($childCategory->childCategories as $anotherChildCategory)
<li>
<a class="animated-category-list-container-item category-link" data-value="{{ $anotherChildCategory->slug }}" data-name="{{ $anotherChildCategory->name }}" href="javascript:void(0)">{{ $anotherChildCategory->name }}</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
@else
<div class="col-6 col-md-2 text-center">
<a class="category-item category-link" data-value="{{ $childCategory->slug }}" data-name="{{ $childCategory->name }}" href="javascript:void(0)">
<div class="category-container">
<div class="category-image-container">
<img src="{{ asset('storage/' . $childCategory->image->path . '/' . $childCategory->image->filename) }}" alt="{{ $childCategory->name }}" alt="{{ $childCategory->name }}">
<p>{{ $childCategory->name }}</p>
</div>
</div>
</a>
</div>
@endif
@endforeach
</div>
@endif
<div class="row pb-1">
<div class="col-12 mb-1">
<h3 class="text-dark font-weight-bold">Featured Deals <small id="child-category-indicator" class='text-muted text-capitalize'></small></h3>
<hr>
</div>
</div>
<div id="loadingDiv" class="text-center">
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div id="category-product-container">
<!-- Ajax response will be loaded here -->
</div>
</div>
</div>
</div>
@endsection
Javascript:
function onQueryLoad() {
$.ajax({
async: true,
beforeSend: function() {
loading.show();
ItemContainer.hide();
},
complete: function() {
loading.hide();
ItemContainer.show();
},
url: "{{ route('web.shop.category', ['categorySlug' =>"+query+"])}}",
type: "get",
success: function(result) {
ItemContainer.html(result);
},
error: function(result) {
console.log(result.status + ' ' + result.statusText);
}
});
}
$('#search-button').on('click', function(e) {
e.preventDefault();
var query=document.getElementById('search-box').value;
query = query.replace(/\s+/g, '-').toLowerCase();
$.ajax({
async: true,
beforeSend: function() {
loading.show();
ItemContainer.hide();
},
complete: function() {
loading.hide();
chidCategoryIndicator.text('/ ' + query)
ItemContainer.show();
},
url: "/web/shop/category/" + query,
type: "get",
success: function(result) {
ItemContainer.html(result);
},
error: function(result) {
console.log(result.status + ' ' + result.statusText);
}
});
});
Is this possible to set a rule for query?
Level 6
How does it look like??
I need to make it dynamic,meaning if I search other query without the full name of it, it should return them.
Level 75
$users = DB::table('users')
->where('name', 'like', 'T%')
->get();
An example from docs. replace T with a variable as needed.
$dogsch = $dogsearch . "%";
$query = Dog::where('dogname', 'like', $dogsch);
if ($aval == "n") {
$query->where('adopted', '=', 1);
} else if ($aval == "y") {
$query->where('adopted', '=', 0);
}
$dogs = $query->orderBy('lastedit', 'DESC')->paginate(5);
$pagelinks = array('psch' => $dogsearch, 'aval' => $aval);
// more code
Level 6
my categories table has a slug column where it retrieves the sub items from it like led, wall lights,etc.
How does it look like in my code?
Level 75
I always jut query data. If I need all customers whose name starts with "wh" it's wh%. I don't even understand the need for a slug in this kind of query.
For pretty url's, that's for main pages, not drill down searches. They aren't usually bookmarked any way, and pagination changes with adding more product.
I just did a Walm--- search,
https://www.walmart.com/search/?query=toilet%20paper
and
https://www.walmart.com/search/?query=le
Main category pages = yes slug away.
Drill down search = no
Level 6
You mean I should not allow wild card in searches?
This query is mainly for searching product categories
Level 75
You mean I should not allow wild card in searches?
No, go to lowes, and do some searching, see how they at times use friendly url, and when they use query string.
Slugs are for mainly friendly url, not complex searches.
Go here and see how they maintain friendly url https://jobs.gecareers.com/global/en/ge-aviation-jobs
At https://jobs.boeing.com/veterans when searching for "mech" a dropdown comes up and assist in the search, so do that, if user types LE, assist with a search dropdown, otherwise drop slugs and do normal database queries.
Experiment, and draw ideas from other sites, like I just did.
Please or to participate in this conversation.