Code For Creating User Input Box In Google AJAX News Bar?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • pcol
    New Member
    • May 2010
    • 3

    Code For Creating User Input Box In Google AJAX News Bar?

    Does anyone know the code to insert into a standard AJAX Google News Bar code which would allow a user to input a name from which to have the News Bar search.

    Currently, the News Bar code only searches out names entered as the "name" within the code itself entered by the programmer. Looking for a way to allow users to input a name from the News Bar itself.

    EG- Input Box Displays News

    Current coding is:

    Code:
    <script type="text/javascript">
        function LoadNewsBar() {
          var newsBar;
          var options = {
            largeResultSet : true,
            title : "In the news",
            horizontal : true,
            linkTarget : GSearch.LINK_TARGET_BLANK,
            autoExecuteList : {
              executeList : ["keyword"]
            }
          }
    
          newsBar = new GSnewsBar(document.getElementById("newsBar-bar"), options);
    //-->where "keyword" can be any word
    Would like to be able to allow the web page user to enter the keyword to search within the News Bar itself...

    Thanks...
    Last edited by acoder; May 20 '10, 10:47 AM. Reason: Please use [code] tags
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    If I'm following correctly, a text box which the user uses to input the keyword which you pass to the LoadNewsBar function:
    Code:
    function LoadNewsBar(keyword) {
    and that's used in place of "keyword":
    Code:
    executeList : [keyword]

    Comment

    • pcol
      New Member
      • May 2010
      • 3

      #3
      That doesn't work: and I haven't seen any code whereby any word is entered between the brackets after LoadNewsBar. The brackets are supposed to be empty The matter seems to be a simple one- yet I'm not an AJAX code writer. All I want to be able to do is have the user enter a keyword to search news by in the News Bar, rather than have the keywords being static as designated within the coding. Thanks for your reply, though...

      Comment

      • pcol
        New Member
        • May 2010
        • 3

        #4
        So for example the below code is the ajax code to create a search box for the user to do a google search- and I would imagine that this code can be integrated into the NewsBar code to do what I'm looking to do:

        Code:
        google.load('search', '1');
        
        var imageSearch;
        
        function addPaginationLinks() {
          // The cursor object has all things to do with pagination
          var cursor = imageSearch.cursor;
          var curPage = cursor.currentPageIndex; // check what page the app is on
          var pagesDiv = document.createElement('div');
          for (var i = 0; i < cursor.pages.length; i++) {
            var page = cursor.pages[i];
            if (curPage == i) { // if we are on the curPage, then don't make a link
              var label = document.createTextNode(' ' + page.label + ' ');
              pagesDiv.appendChild(label);
            } else {
              // If we aren't on the current page, then we want a link to this page.
              // So we create a link that calls the gotoPage() method on the searcher.
              var link = document.createElement('a');
              link.href = 'javascript:imageSearch.gotoPage('+i+');';
              link.innerHTML = page.label;
              link.style.marginRight = '2px';
              pagesDiv.appendChild(link);
            }
          }
        
          var contentDiv = document.getElementById('content');
          contentDiv.appendChild(pagesDiv);
        }
        
        function searchComplete() {
          // Check that we got results
          if (imageSearch.results && imageSearch.results.length > 0) {
            // Grab our content div, clear it.
            var contentDiv = document.getElementById('content');
            contentDiv.innerHTML = '';
        
            // Loop through our results, printing them to the page.
            var results = imageSearch.results;
            for (var i = 0; i < results.length; i++) {
              // For each result write it's title and image to the screen
              var result = results[i];
              var imgContainer = document.createElement('div');
        
              var title = document.createElement('div');
              // We use titleNoFormatting so that no HTML tags are left in the title
              title.innerHTML = result.titleNoFormatting;
        
              var newImg = document.createElement('img');
              // There is also a result.url property which has the escaped version
              newImg.src = result.tbUrl;
        
              imgContainer.appendChild(title);
              imgContainer.appendChild(newImg);
        
              // Put our title + image in the content
              contentDiv.appendChild(imgContainer);
            }
        
            // Now add the paging links so the user can see more results.
            addPaginationLinks(imageSearch);
          }
        }
        
        function OnLoad() {
          // Our ImageSearch instance.
          imageSearch = new google.search.ImageSearch();
        
          // Restrict to extra large images only
          imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,
                                     google.search.ImageSearch.IMAGESIZE_MEDIUM);
        
          // Here we set a callback so that anytime a search is executed, it will call
          // the searchComplete function and pass it our ImageSearch searcher.
          // When a search completes, our ImageSearch object is automatically
          // populated with the results.
          imageSearch.setSearchCompleteCallback(this, searchComplete, null);
        
          // Find me a beautiful car.
          imageSearch.execute("Subaru STI");
        }
        google.setOnLoadCallback(OnLoad);
        Last edited by gits; May 21 '10, 12:05 PM. Reason: added code tags

        Comment

        Working...