foreach item within jquery array - Templates, (partial) views and macros

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Craig Handy 3 posts 73 karma points

Jan 16, 2017 @ 15:16

Newbie help needed - @foreach item within Jquery array

Hi I'm new to this forum

I'm trying to create a simple auto complete search box which is populated with an array of indexed page nodes within Umbraco. However I'm having trouble trying to generate the array as each array item needs to be separated with a inverted commas and comas like for example "foo", "foo2", etc. See example of how the Jquery needs to look:

<script>
  $( function() {
    var availableTags = [
      "Item1",
      "Item2",
      "Item3",
      "Item4",
      "Item6",
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
</script>

I'm trying to pass an array of nodes or page names which will auto populate my search box when the user starts typing so I'm trying to use the following:

@inherits UmbracoTemplatePage
@{    
    var homePage = CurrentPage.AncestorsOrSelf(1).First();
    var searchItems = homePage.Children.Where("UmbracoNaviHide == false");
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="kb-search">
<form action="/search" method="GET" class="ezsearch-form" novalidate="novalidate">
    <input type="text" name="q" placeholder="Search" class="kb_searchbox" id="kbSearch">
    <input type="submit" value="Search" class="kb-searchbutton">
</form>
</div>

<script>
$( function() {
  var availableTags = [       
 //Umbraco code 
  @foreach (var item in searchItems)          
      {
        @item.Name
      }  
  // End      
  ];
  $( "#kbSearch" ).autocomplete({
    source: availableTags
  });
});
</script>

However each @item.Name needs to be within inverted commas and separated by a coma, but I can't see how to do this. I've tried various things but none seem to work. In its current format it does pass out a list of items however they aren't separated by inverted commas and commas.

Does anyone have any ideas!

Many thanks

Copy Link

Ismael 71 posts 354 karma points

Jan 16, 2017 @ 18:30

Hi,

There are various ways to do this, however working with your current sample you could update your js to:

    var availableTags = [];
   //Umbraco code
    @foreach (var item in searchItems)
    {
       @:availableTags.push("@item.Name")
        }
    // End

Or if you used a typed model you could do something like:

   //I changed from CurrentPage to Model.Content and Ancestors to Ancestor
    var homePage = Model.Content.AncestorOrSelf(1);
    var searchItems = homePage.Children.Where(x => x.IsVisible());

   ...

    <script>
    var availableTags = [@Html.Raw(string.Join(",", searchItems.Select(x=> "'" + x.Name + "'")))];    

    ...
    </script>

You could also potentially create a basic service endpoint and use ajax.

Cheers

Copy Link

Craig Handy 3 posts 73 karma points

Jan 17, 2017 @ 08:18

0

Many thanks for your help, I will give it a go with that!

Kind regards

Copy Link

Craig Handy 3 posts 73 karma points

Jan 17, 2017 @ 09:22

That worked a treat, I used the following:

@inherits UmbracoTemplatePage
@{

    var homePage = Model.Content.AncestorOrSelf(1);
    var searchItems = homePage.Children.Where(x => x.IsVisible());

}




<script>
$( function() {

   var availableTags = [@Html.Raw(string.Join(",", searchItems.Select(x=> "'" + x.Name + "'")))];     

  $( "#kbSearch" ).autocomplete({
    source: availableTags
  });
});
</script>

...and I am now returning all of my child pages in the Jquery string correctly and the auto complete works too.

Kind regards

Copy Link

is working on a reply...

Please Sign in or register to post replies