donljt2606
2017-11-09 21:23
浏览 102

搜索栏过滤器的问题,在laravel刀片模板中使用JS / JQuery

I have a blade template with a search bar, which has no submit button and is used for filtering. However, I can't seem to get it to filter appropriately, as the page was originally using angular (which has been removed completely).

My page displays all of my products using foreach loops and displays the info from variables in my page controller (pulling everything from the database and storing as variables). Anyway, everything displays fine but I need help getting this to filter properly.

Basically, if a term entered in the search bar is anywhere in the JSON object gathered by the controller, then I want it to only display those objects. I may even need another foreach loop.

Here's the html/blade code:

<!--Search bar div-->
<div class="uk-width-5-10">

        <div class="md-input-wrapper search-form">
            <form id="searchProducts">
                <input type="text" class="md-input label-fixed" name="srch-term" id="srch-term" autofocus placeholder="Search Products"/>
                <span class="md-input-bar"></span>

            </form>
        </div>

<!--foreach loops around the wrapper that shows products, for reference-->
@foreach ($orderFormData->pgroups as $pgroup)
   @foreach ($pgroup->image_names as $image_name)
      @foreach ($pgroup->pskus as $psku)

Javascript for the search (see the variable for the JSON object, that's what I need to search within)

<script>   
    var orderFormData = <?php echo json_encode ($tempdata);?>;
</script>

<script>
    var orderData = orderFormData // default value
    var search = function (e) {
        var term = e.currentTarget.value
        orderData = Object.entries(orderFormData).reduce(function (data, entry) {
            if (entry[0].match(term) || entry[1].match(term)) {
                data[entry[0]] = entry[1]
            }

            return data
        }, {})

        console.log(orderData)
    }

    document.querySelector('#srch-term').addEventListener('keyup', search)
</script>

Is there a better way I should be doing this? I may even need to do a foreach loop around the search bar

图片转代码服务由CSDN问答提供 功能建议

我有一个带搜索栏的刀片模板,它没有提交按钮,用于过滤。 但是,我似乎无法对其进行适当的过滤,因为页面最初使用的是角度(已完全删除)。

我的页面使用foreach循环显示所有产品 并在我的页面控制器中显示变量的信息(从数据库中提取所有内容并存储为变量)。 无论如何,一切都很好,但我需要帮助让这个过滤得当。

基本上,如果在搜索栏中输入的术语是控制器收集的JSON对象中的任何位置,那么我希望它只显示这些对象。 我甚至可能需要另一个foreach循环。

这是html /刀片代码:

 &lt;! - 搜索栏div  - &gt; 
&lt; div class =  “uk-width-5-10”&gt; 
 
&lt; div class =“md-input-wrapper search-form”&gt; 
&lt; form id =“searchProducts”&gt; 
&lt;输入类型 =“text”class =“md-input label-fixed”name =“srch-term”id =“srch-term”autofocus placeholder =“Search Products”/&gt; 
&lt; span class =“md-input-  bar“&gt;&lt; / span&gt; 
 
&lt; / form&gt; 
&lt; / div&gt; 
 
&lt;! -  foreach循环显示产品的包装器,供参考 - &gt; 
  @foreach($ orderFormData-&gt; pgroups as $ pgroup)
 @foreach($ pgroup-&gt; image_names as $ image_name)
 @foreach($ pgroup-&gt; pskus as $ psku)
  <  / pre> 
 
 

用于搜索的Javascript(请参阅JSON对象的变量,这是我需要在其中搜索的内容)

 &lt; script&gt;  
 var orderFormData =&lt;?php echo json_encode($ tempdata);?&gt ;; 
&lt; / script&gt; 
 
&lt; script&gt; 
 var orderData = orderFormData //默认值
 var search = function(  e){
 var term = e.currentTarget.value 
 orderData = Object.entries(orderFormData).reduce(function(data,entry){
 if(entry [0] .match(term)|| entry [  1] .match(term)){
 data [entry [0]] = entry [1] 
} 
 
返回数据
},{})
 
 console.log(orderData)\  n} 
 
 document.querySelector('#srch-term')。addEventListener('keyup',search)
&lt; / script&gt; 
   
 
 

是 有更好的方法我应该这样做吗? 我甚至可能需要围绕搜索栏进行foreach循环

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • duanpu6319 2017-11-10 18:37
    已采纳

    It kind of sounds like you're looking for an auto complete. Have you looked at the library? It's pretty easy to implement, and might add more functionality more easily than writing loops yourself.

    https://jqueryui.com/autocomplete/

    I'll get into why I named the function below, but here's my implementation:

              monkeyPatchAutocomplete();
                $("#your_searchbox_selector").autocomplete({
                  source: // http://Your_Search_URL_endpoint_here,
                  delay: 500, // prevents search from running on *every* keystroke
                  minLength: 1, // default is 2, change or remove as you like
    
                  // open page after selecting (with enter key).
                  select: function( event, ui )
                    {
                      var qval = ui.item.id // this pulls whatever field you're looking for in your JSON that you want to use to direct your user to the new page, in my case "id";
                      var url = 'http://whereever_you_want_your_user_to_go?';
                      window.location = url + qval;
                    }
                });
    

    For my implementation, I wanted to color code the results in my autocomplete list with active and inactive entries, so my search controller JSON result includes 3 fields:

    'value' => $searchable_values, 'id' => $id_mapping_of_whatever, 'class' => $css_classes_to_use

    My search controller plugs in emails, names, and phone numbers to the value field, which is searchable, then maps an id, and plugs in css classes that I use to change the text color of the results through a on jQuery's autocomplete:

           function monkeyPatchAutocomplete()
            {
              $.ui.autocomplete.prototype._renderItem = function( ul, item)
                {
                  var re = new RegExp(this.term, 'i');
                  var t = item.label.replace(re,"<span class='autocomplete-span'>" + this.term + "</span>");
    
                  return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a class='text-" + item.class + "'>" + t + "</a>" )
                    .appendTo( ul )
                };
              };
    

    If you're interested in formatting your results, check out dev.e.loper's answer to: How can I custom-format the Autocomplete plug-in results?.

    点赞 评论

相关推荐 更多相似问题