1

I have created CAML query. Below is the code for searching list item.

<input type="text" style="width:350px" id="txtSearch" />
<dl class="dropdown"> 
<dt>

<a href="#">

  <span class="hida">Select Country</span>    

  <p class="multiSel"></p>  

</a>

</dt>



<dd>

    <div class="mutliSelect">

        <ul>

            <li>

                <input name='country' type="checkbox" value="Kenya" />Kenya 
</li>

            <li>

                <input name='country' type="checkbox" value="Ethiopia" 
/>Ethiopia</li>

            <li>

                <input name='country' type="checkbox" value="Uganda" 
/>Uganda</li>

            <li>

                <input name='country' type="checkbox" value="Morocco" 
/>Morocco</li>

            <li>

                <input name='country' type="checkbox" value="Sudan" 
/>Sudan</li>

            <li>

                <input name='country' type="checkbox" value="Somalia" 
/>Somalia</li>

        </ul>

    </div>

</dd>

  <!-- <button>Filter</button> -->

</dl>




<style>





.dropdown {

  padding-left: 500px;

}




a {

  /* color: #fff; */

}

.dropdown dd,

   .dropdown dt {

  margin: 0px;

  padding: 0px;

}

 .dropdown ul {

  margin: -1px 0 0 0;

}


 .dropdown dd {

  position: relative;

}

 .dropdown a,

.dropdown a:visited {

color: #fff; 

  text-decoration: none;

  outline: none;

  font-size: 12px;

}




    .dropdown dt a {

   background-color: #4F6877; 

  display: block;

  padding: 8px 20px 5px 10px;

 min-height: 25px;

  line-height: 24px;

  overflow: hidden;

  border: 0;

  width: 272px;

}


  .dropdown dt a span,

.multiSel span {

  cursor: pointer;

  display: inline-block;

  padding: 0 3px 2px 0;

}

   .dropdown dd ul {

  background-color: #4F6877;

  border: 0;

  color: #fff;

  display: none;

  left: 0px;

  padding: 2px 15px 2px 5px;

  position: absolute;

 top: 2px;

 width: 280px;

  list-style: none;

  height: 100px;

  overflow: auto;

}


   .dropdown span.value {

  display: none;

}


.dropdown dd ul li a {

  padding: 5px;

 display: block;

}


    .dropdown dd ul li a:hover {

  background-color: #fff;

}


</style>

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

 <script>


    $(".dropdown dt a").on('click', function() {

  $(".dropdown dd ul").slideToggle('fast');

});




    $(".dropdown dd ul li a").on('click', function() {

  $(".dropdown dd ul").hide();

});




function getSelectedValue(id) {

  return $("#" + id).find("dt a span.value").html();

}




$(document).bind('click', function(e) {

 var $clicked = $(e.target);

  if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();

});




$('.mutliSelect input[type="checkbox"]').on('click', function() {




  var title = 
$(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),

title = $(this).val() + ",";




  if ($(this).is(':checked')) {

    var html = '<span title="' + title + '">' + title + '</span>';

    $('.multiSel').append(html);

    $(".hida").hide();

  } else {

    $('span[title="' + title + '"]').remove();

    var ret = $(".hida");

    $('.dropdown dt a').append(ret);




  }

});

</script>
    <input type="button" style=" font-size:20px;font-family:'Segoe UI 
    Light','Segoe UI','Segoe',Tahoma,Helvetica,Arial,sans-serif; background- 
   color:#0072C6; color:white" id="btnSearch" value="Search" onclick="return 
    search(); return false" />

<style>
.highlight {
background-color: #FFFF88;
}
</style>
    <script type="text/javascript" src=".../SiteAssets/jquery-
1.12.4.min.js"></script>
<script type="text/javascript">

 /*
 *This is jQuery Highlight plugin to highlight the result text

 */

jQuery.extend({
highlight: function (node, re, nodeName, className) {
    if (node.nodeType === 3) {
        var match = node.data.match(re);
        if (match) {
            var highlight = document.createElement(nodeName || 'span');
            highlight.className = className || 'highlight';
            var wordNode = node.splitText(match.index);
            wordNode.splitText(match[0].length);
            var wordClone = wordNode.cloneNode(true);
            highlight.appendChild(wordClone);
            wordNode.parentNode.replaceChild(highlight, wordNode);
            return 1; //skip added node in parent
        }
    } else if ((node.nodeType === 1 && node.childNodes) && // only element 
nodes that have children
            !/(script|style)/i.test(node.tagName) && // ignore script and 
style nodes
            !(node.tagName === nodeName.toUpperCase() && node.className === 
className)) { // skip if already highlighted
        for (var i = 0; i < node.childNodes.length; i++) {
            i += jQuery.highlight(node.childNodes[i], re, nodeName, 
className);
        }
    }
    return 0;
    }
});

jQuery.fn.unhighlight = function (options) {
var settings = { className: 'highlight', element: 'span' };
jQuery.extend(settings, options);

return this.find(settings.element + "." + settings.className).each(function 
() {
    var parent = this.parentNode;
    parent.replaceChild(this.firstChild, this);
    parent.normalize();
}).end();
};

jQuery.fn.highlight = function (words, options) {
var settings = { className: 'highlight', element: 'span', caseSensitive:  
   false, wordsOnly: false };
jQuery.extend(settings, options);

if (words.constructor === String) {
    words = [words];
}
words = jQuery.grep(words, function(word, i){
  return word != '';
});
words = jQuery.map(words, function(word, i) {
  return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); 
});
if (words.length == 0) { return this; };

var flag = settings.caseSensitive ? "" : "i";
var pattern = "(" + words.join("|") + ")";
if (settings.wordsOnly) {
    pattern = "\\b" + pattern + "\\b";
}
var re = new RegExp(pattern, flag);

return this.each(function () {
    jQuery.highlight(this, re, settings.element, settings.className);
});
};

</script>
<script type="text/javascript">

        function search()

      {
        var checkedValues = '';
        $('input[name="country"]:checked').each(function() {
           console.log(this.value);
           checkedValues += "<Value Type='text'>" + $(this).val() + "
</Value>";
        });

      var Countryqry= ''; /* document.getElementById("Countryqry").value; */
       $("#tasksUL").empty();
      var qry= document.getElementById("txtSearch").value
  var soapEnv =
        "<soapenv:Envelope 
xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
            <soapenv:Body> \
                 <GetListItems 
xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                    <listName>Project Inventory</listName> \
                    <viewFields> \
                        <ViewFields> \
                           <FieldRef Name='LinkTitleNoMenu' /> \
                           <FieldRef Name='Country' /> \
                           <FieldRef Name='LinkTitle' /> \
 <FieldRef Name='ID' /> \
                       </ViewFields> \
  </viewFields> \
  <query> \
   <Query> \
   <Where> \
  <And> \
     <In> \
        <FieldRef Name='Country' /> \
        <Values>"+checkedValues+"</Values>\
     </In> \
     <Or> \
        <Contains> \
           <FieldRef Name='LinkTitleNoMenu' /> \
           <Value Type='Computed'>"+qry+"</Value> \
        </Contains> \
        <Contains> \
           <FieldRef Name='LinkTitle' /> \
           <Value Type='Computed'>"+qry+"</Value> \
        </Contains> \
     </Or> \
  </And> \
   </Where> \
    </Query> \
  </query> \
   </GetListItems> \
            </soapenv:Body> \
        </soapenv:Envelope>";       

     $.ajax({
        url: ".../InformationTechnology/sb1/_vti_bin/lists.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processResult,
        contentType: "text/xml; charset=\"utf-8\""
    });

  }

    function processResult(xData, status) {
// show searching text and image when search button is clicked
var loadhtml="<div id='loading' class='ms-dlgLoadingTextDiv'><span 
style='padding-top: 6px; padding-right: 10px;'><img width='24' height='24' 
title='This animation indicates the operation is in progress. Click to 
remove this animated image.' src='/_layouts/15/images/gears_anv4.gif?
rev=36'/></span><span class='ms-core-pageTitle ms-accentText'>Searching...
</span></div>";

//var totalRows = $(xData.responseXML).find("rs\\:data").attr("ItemCount");
var totalRows =   getZRows(xData.responseXML);
if(totalRows=="0")
{
 $("#loading").remove();
$("#tasksUL").before("<div  id='loading'  style='color:red;font-
size:15px'>No matching records found. Please refine your search.</div>");
return true;
}
$("#tasksUL").before(loadhtml);
    $(xData.responseXML).find("z\\:row, row").each(function() {
// creating hyperlink for each item to display form of that list item
var lnk="<a 
href='.../InformationTechnology/sb1/Lists/Project%20Inventory/DispForm.aspx?
ID=" + $(this).attr('ows_ID') + 
"&source=.../InformationTechnology/sb1/default.aspx'>"+ 
$(this).attr("ows_Title") +"</a>";

        var liHtml = "<li>"+ lnk+"</li>";

// 2 second delay and show searching text and image also highlight the 
   result with the searched keyword
setTimeout(function(){
 $("#loading").remove();
  $("#tasksUL").append(liHtml);
  $("#tasksUL > li").highlight(document.getElementById("txtSearch").value);
}, 2000);

    });

}


$(document).ready(function(){
// check if enter button is pressed and then search button clicked event is 
   called
$('#txtSearch').keypress(function(e){
  if(e.keyCode==13)
 { $('#btnSearch').click();return false;}
});
});

</script>
<script type="text/javascript">
function getZRows(rXML) {
  var rows;
  var itemCount = $(rXML).find("rs\\:data").attr("ItemCount");
  if (rXML.getElementsByTagName("z:row").length == 0 && itemCount == 
undefined) {
   rows = rXML.getElementsByTagNameNS("*", "row");
  } else {
  rows = rXML.getElementsByTagName("z:row");
  }
  return rows.length;
 }
</script>

<div id="search_result">
<ul id="tasksUL"/>
</div>
  • What's the question? – Ransher Singh Aug 21 '17 at 15:25
  • Chrom is oK, But IE got an issue ? – Sara Aug 21 '17 at 15:31
  • What is the error? – Ornery Walrus Aug 21 '17 at 15:34
  • Object doesn't support property or method 'getElementsByTagNameNS' – Sara Aug 21 '17 at 15:36
  • When I changed the Document mode to "Edge" or more than IE8, it works. But, My default IE is 8 – Sara Aug 21 '17 at 15:48
0

IE8 doesn't support getElementsByTagNameNS. getElementsByTagName should work in IE8. You can find more about it here (and in the comments therein)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.