none
Search Webpart

    Question

  • Hi All,

       How to add search web part and make it work for below code.

    <HTML>
    <HEAD>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <TITLE>Dynamically shortened Text with Show More link using jQuery</TITLE>
    <STYLE type="text/css">
    body, input{
    font-family: Calibri, Arial;
    margin: 0px;
    padding: 0px;
    }
    a {
    color: #0254EB
    }
    a:visited {
    color: #0254EB
    }
    #header h2 {
    color: white;
    background-color: #00A1E6;
    margin:0px;
    padding: 5px;
    }
    .comment {
    width: 400px;
    background-color: #f0f0f0;
    margin: 10px;
    }
    a.morelink {
    text-decoration:none;
    outline: none;
    }
    .morecontent span {
    display: none;

    }
    .Main{
        margin: 20px 20px 0 0;  
        }

    .pull-left img {
        float: left;
        clear:left;
        margin-right:8px;
    }
    .Title{
        margin-
        font-size:20px;
    }
    .Desc {
    margin-right:8px;
    margin-right:18px;
    font-size:13px;
    }
    .clear{
    clear:both;
    }
    .LikesCount{
    float:left;
    border-bottom:thin;
    }
    .ms-comm-postListItem{
    border-bottom:1px solid #c6c6c6;!important
    }
    .ms-comm-heroLinkContainer{

    display:none;
    }
    spanclas{
    margin-left:1em;
    }
    body {font-family: Arial;}

    /* Style the tab */
    .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */
    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
      background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
      background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
    }
    </STYLE>
    </HEAD>
    <BODY>
    <div id="header">
    </div>
    <input id="myInput" type="text" placeholder="Search..">
    <div class="tab">
      <button class="tablinks"  onclick="openCity(event, 'London')">Recent</button>
      <button class="tablinks"  onclick="openCity(event, 'Paris')">Most Liked</button>
      <button class="tablinks"  onclick="openCity(event, 'Tokyo')">Most Commented</button>
      <button class="tablinks"  onclick="openCity(event, 'Tokyo')">Selected</button>
      <button class="tablinks"  onclick="openCity(event, 'Tokyo')">Implemented</button>
    </div>
    <div id="newsitems"></div>
    </BODY>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    /*function getItem(listUrl) {  
            $.ajax({  
                url: _spPageContextInfo.webAbsoluteUrl + listUrl,  
                type: "GET",  
                headers: {  
                    "accept": "application/json;odata=verbose",  
                },  
                success: function(data) {  
                    console.log(data.d.results);  
                    var items = data.d.results;  
       $("#newsitems").append("<table id=\"Discussiontbl\"></table>");
        $("#newsitems").append("<tr  style='background-color: #4CAF50;border-bottom: 1px solid #ddd;'><td>Likes & Replies</td><td> Replies</td><td> Title</td><td>Body</td><td>Answers</td></tr>");  
                      for (var i = 0; i < items.length; i++) {  
    if(items[i].Title != null){
    var likes=items[i].DescendantLikesCount
    if(likes == null){likes=0}
    $("#newsitems").append("<tr style='border-bottom: 1px solid #ddd;padding: 20px;'><td>"+likes + " likes <br/><div id=R"+items[i].ID+">0</div></td><td>"+ items[i].Title +"</td><td>"+ items[i].Body +"</td><td><div id="+ items[i].ID +"></div></td></tr>");
    }
    if(items[i].ParentItemID != null){
    $("#" + items[i].ParentItemID).append(items[i].Body)
    var repliesCount=parseInt($("#R" + items[i].ParentItemID).text())+1
    $("#R" + items[i].ParentItemID).empty()
    $("#R" + items[i].ParentItemID).append(repliesCount + "Replies")
    }
                    }  
                },  
                error: function(error) {  
                    alert(JSON.stringify(error));  
                }  
            });  
        }  
    var listUrl = "/_api/Web/Lists/GetByTitle('InnovationDiscussion')/Items";
    getItem(listUrl)*/
    $(document).ready(function(){
      $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myTable tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });
    function getItem(listUrl) {  
            $.ajax({  
                url: _spPageContextInfo.webAbsoluteUrl + listUrl,  
                type: "GET",  
                headers: {  
                    "accept": "application/json;odata=verbose",  
                },  
                success: function(data) {  

                    console.log(data.d.results);  
                    var items = data.d.results;  
     $("#newsitems").append("<table id=\"Discussiontbl\"></table>");
       /* $("#newsitems").append("<tr  style='background-color: #4CAF50;border-bottom: 1px solid #ddd;'><td>image</td><td>Likes & Replies</td><td>Title</td><td>Body</td></tr>");*/
     for (var i = 0; i < items.length; i++) {  
    if(items[i].Title != null){
    var likes=items[i].DescendantLikesCount
    if(likes == null){likes=0}
    var img=null
    if(items[i].Image !=null){
    img="<img src="+items[i].Image.Url+" alt='No Preview'>"
    }
    $("#newsitems").append("<div style='border-bottom: 1px solid #ddd;padding: 20px;'><div>"+img+" <a href=\"http://rsbsp01:1111/en-us/Lists/InnovationDiscussion/Flat.aspx?RootFolder=%2Fen%2Dus%2FLists%2FInnovationDiscussion%2F"+ items[i].Title +"&FolderCTID=0x0120020069677C3072CAFE4FBD6403C41E3A7531\"> "+ items[i].Title +"</a><div>"+ items[i].Body +"</div></div><span class='spanclas'><img src='http://rsbsp01:1111/en-us/PublishingImages/LikeIcon.png'>"+likes + " likes </span><span><img src='http://rsbsp01:1111/en-us/PublishingImages/Commenticon.png'> "+items[i].ID+"0</span><span><img src='http://rsbsp01:1111/en-us/PublishingImages/Date.png'>"+ items[i].Created +"</span></div></div>");
    }
    if(items[i].ParentItemID != null){
    $("#" + items[i].ParentItemID).append(items[i].Body)
    var repliesCount=parseInt($("#R" + items[i].ParentItemID).text())+1
    $("#R" + items[i].ParentItemID).empty()
    $("#R" + items[i].ParentItemID).append(repliesCount + " Replies")
    }
                    }  
                },  
                error: function(error) {  
                    alert(JSON.stringify(error));  
                }  
            });  
        }  
    var listUrl = "/_api/Web/Lists/GetByTitle('InnovationDiscussion')/Items";
    getItem(listUrl)
    /*
    function getListData() {
    $.ajax({
           url: _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getByTitle('InnovationDiscussion')/items?$filter=ContentType eq 'Discussion",
                    type: "GET",
            headers: {
                "accept": "application/json;odata=verbose",
                "content-type": "application/json;odata=verbose",
            },        
                
            success: onQuerySucceeded,
            error: onQueryFailed
        });
        
    }
    function onQuerySucceeded(data) {
          console.log(data.d.results);
                $.each(data.d.results, function (key, value) {
                            $("#newsitems").append('<div class="Main">');
                            $("#newsitems").append('<div class="Title">'+value.Title+'</div>');
                           $("#newsitems").append("<div class='pull-left' align='left'><img src= '"+value.Image.Url+"'></div>");
                            $("#newsitems").append('<div class="Desc">'+value.Body+'</div>');                        
                           $("#newsitems").append('<div class="LikesCount"><img src="http://rsbsp01:1111/en-us/PublishingImages/LikeIcon.png">'+value.LikesCount+'</div><br/>');
                           $('#theDiv').prepend('<img id="theImg" src="http://rsbsp01:1111/en-us/PublishingImages/Enrichment.PNG" />');
                           $("a:contains('Recent')").text('Recently');
                           $("a:contains('My discussions')").text('MostRecommended');
                       });
                
              $("#newsitems").append('</div>');    
       }*/
    function onQueryFailed() {
        alert('Sorry An Error Has Occurred!');
    }
     ExecuteOrDelayUntilScriptLoaded(getListData, "sp.js")
    </SCRIPT>
    </HTML>

    Sunday, February 10, 2019 8:35 AM

All replies

  •  Hi All,

     Finally i am done some progress thank you all for your support. Please let me know how to achieve search configuration for below discussion list and how to make code for most liked,Recent and most commented. Kindly help its kind of urgent need to finish by today.

    Monday, February 11, 2019 7:08 AM
  • Hi

    How do you develop the form?

    You can create search service application in CA.

    Then create a content source in the application.

    Start full crawl in the content source.

    After that, you can use search function in SharePoint default search box.


    Please remember to mark the replies as answers if they helped.
    Linyu - SharePoint Engineer
    QQ Group: 72637444

    Monday, February 11, 2019 7:27 AM
  • Hi All,

         Please could you ellobrate?

    Regards,

    Mohamed.

    Monday, February 11, 2019 7:48 AM
  • Hi,

    Sample script to filter discussion based on subject for your reference.

    <input id="myInput" type="text" onkeypress="FilterDiscussion(event)" placeholder="Search..">
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript">
            function FilterDiscussion(e) {
                var key = e.keyCode || e.which;
                if (key == 13) {
                    var subject = $('#myInput').val();
                    var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getByTitle('Disscussion')/items?$filter=ContentType eq 'Discussion' and substringof('" + subject + "',Title)";
                    // execute AJAX request
                    $.ajax({
                        url: requestUri,
                        type: "GET",
                        async: false,
                        headers: { "ACCEPT": "application/json;odata=verbose" },
                        success: function (data) {
                            var items = data.d.results;
                            //debugger;
                            //to do binding
                        },
                        error: function (sender, args) {
                            console.log(sender);
                            //debugger;
                        }
                    })
                }                       
            }
        </script>

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, February 12, 2019 3:20 AM
  • Hi Lee,

           Thank you for the reply. i tried it i can able to see search box but item cannot able to search.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
       <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
       <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
       <script type="text/javascript">
          $(document).ready(function(){
            $("#myInput").on("keyup", function() {
              var value = $(this).val().toLowerCase();
              $("#myTable tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
              });
            });
          });
          function getItem(listUrl) {  
                  $.ajax({  
                      url: _spPageContextInfo.webAbsoluteUrl + listUrl,  
                      type: "GET",  
                      headers: {  
                          "accept": "application/json;odata=verbose",  
                      },  
                      success: function(data) {  
          
                          console.log(data.d.results);  
                          var items = data.d.results;  
           $("#newsitems").append("<table id=\"Discussiontbl\"></table>");   
           for (var i = 0; i < items.length; i++) {  
          if(items[i].Title != null){
          var likes=items[i].DescendantLikesCount
          if(likes == null){likes=0}
          var img=null
          if(items[i].Image !=null){
          img="<img src="+items[i].Image.Url+" alt='No Preview' style='float:left;'>"
          }
          $("#newsitems").append("<div style='border-bottom: 1px solid #ddd;padding: 20px;'><div>"+img+" <a href=\"http://rsbsp01:1111/en-us/Lists/InnovationDiscussion/Flat.aspx?RootFolder=%2Fen%2Dus%2FLists%2FInnovationDiscussion%2F"+ items[i].Title +"&FolderCTID=0x0120020069677C3072CAFE4FBD6403C41E3A7531\" target='_blank'> "+ items[i].Title +"</a><div>"+ items[i].Body +"</div></div><span class='spanclas'><img src='http://rsbsp01:1111/en-us/PublishingImages/LikeIcon.png'>"+likes + " likes </span><span style='margin-left:7px;'><img src='http://rsbsp01:1111/en-us/PublishingImages/Commenticon.png'> "+items[i].ID+"0</span><span style='margin-left:7px;'><img src='http://rsbsp01:1111/en-us/PublishingImages/Date.png'>"+ items[i].Created +"</span></div></div>");
          }
          if(items[i].ParentItemID != null){
          $("#" + items[i].ParentItemID).append(items[i].Body)
          var repliesCount=parseInt($("#R" + items[i].ParentItemID).text())+1
          $("#R" + items[i].ParentItemID).empty()
          $("#R" + items[i].ParentItemID).append(repliesCount + " Replies")
          }
                          }  
                      },  
                      error: function(error) {  
                          alert(JSON.stringify(error));  
                      }  
                  });  
              }  
          var listUrl = "/_api/Web/Lists/GetByTitle('InnovationDiscussion')/Items";
          getItem(listUrl)
          function onQueryFailed() {
              alert('Sorry An Error Has Occurred!');
          }
         //  ExecuteOrDelayUntilScriptLoaded(getListData, "sp.js")   
         
        
        
            function FilterDiscussion(e) {
                var key = e.keyCode || e.which;
                if (key == 13) {
                    var subject = $('#myInput').val();
                    var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getByTitle('Disscussion')/items?$filter=ContentType eq 'Discussion' and substringof('" + subject + "',Title)";
                    // execute AJAX request
                    $.ajax({
                        url: requestUri,
                        type: "GET",
                        async: false,
                        headers: { "ACCEPT": "application/json;odata=verbose" },
                        success: function (data) {
                            var items = data.d.results;
                            //debugger;
                            //to do binding
                        },
                        error: function (sender, args) {
                            console.log(sender);
                            //debugger;
                        }
                    })
                }                       
            }
        </script>
       
    </HTML>

    Regards,

    Mohamed.

    Tuesday, February 12, 2019 6:55 AM