需要自动填充帮助才能从文本框中的值打开网页

时间：2015-08-27 14:35:24

标签： javascript jquery html jquery-autocomplete

＆＃13;
＆＃13; 
(function($) {

  // Make jQuery's :contains case insensitive (like HTML5 datalist)
  // Changed the name to prevent overriding original functionality
  $.expr[":"].RD_contains = $.expr.createPseudo(function(arg) {
    return function(elem) {
      return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
  });

  $.fn.relevantDropdown = function(options) {

    options = $.extend({
      fadeOutSpeed: 'normal', // speed to fade out the dataList Popup
      change: null
    }, options);

    return this.each(function() {

      var $input = $(this),
        list_id = $input.attr('list'),
        $datalist = $("#" + list_id),
        datalistItems = $datalist.find("option"),

        searchPosition,
        scrollValue = 0,

        // Used to prevent reflow
        temp_items = document.createDocumentFragment(),
        temp_item = null;

      // Insert home for new fake datalist
      $("<ul />", {
        "class": "datalist",
        "id": list_id
      }).appendTo("body");

      // Remove old datalist
      $datalist.remove();

      // Update pointer
      $datalist = $("#" + list_id);

      // Fill new fake datalist
      datalistItems.each(function() {
        temp_item = $("<li />", {
          // .val is required here, not .text or .html
          // HTML *needs* to be <option value="xxx"> not <option>xxx</option>  (IE)
          "text": $(this).val()
        })[0];
        temp_items.appendChild(temp_item);
      });
      $datalist.append(temp_items);

      // Update pointer
      datalistItems = $datalist.find("li");

      // Typey type type
      $input
        .on("focus", function() {
          // Reset scroll
          $datalist.scrollTop(0);
          scrollValue = 0;
        })
        .on("blur", function() {
          // If this fires immediately, it prevents click-to-select from working
          setTimeout(function() {
            $datalist.fadeOut(options.fadeOutSpeed);
            datalistItems.removeClass("active");
          }, 500);
        })
        .on("keyup focus", function(e) {
          searchPosition = $input.position();
          // Build datalist
          $datalist
            .show()
            .css({
              top: searchPosition.top + $(this).outerHeight(),
              left: searchPosition.left,
              width: $input.outerWidth()
            });

          datalistItems.hide();
          $datalist.find("li:RD_contains('" + $input.val() + "')").show();
        });

      // Don't want to use :hover in CSS so doing this instead
      // really helps with arrow key navigation
      datalistItems
        .on("mouseenter", function() {
          $(this).addClass("active").siblings().removeClass("active");
        })
        .on("mouseleave", function() {
          $(this).removeClass("active");
        });

      // Window resize
      $(window).resize(function() {
        searchPosition = $input.position();
        $datalist
          .css({
            top: searchPosition.top + $(this).outerHeight(),
            left: searchPosition.left,
            width: $input.outerWidth()
          });
      });

      // Watch arrow keys for up and down
      $input.on("keydown", function(e) {

        var active = $datalist.find("li.active"),
          datalistHeight = $datalist.outerHeight(),
          datalistItemsHeight = datalistItems.outerHeight();

        // up arrow
        if (e.keyCode == 38) {
          if (active.length) {
            prevAll = active.prevAll("li:visible");
            if (prevAll.length > 0) {
              active.removeClass("active");
              prevAll.eq(0).addClass("active");
            }

            if (prevAll.length && prevAll.position().top < 0 && scrollValue > 0) {
              $datalist.scrollTop(scrollValue -= datalistItemsHeight);
            }
          }
        }

        // down arrow
        if (e.keyCode == 40) {
          if (active.length) {
            var nextAll = active.nextAll("li:visible");
            if (nextAll.length > 0) {
              active.removeClass("active");
              nextAll.eq(0).addClass("active");
            }

            if (nextAll.length && (nextAll.position().top + datalistItemsHeight) >= datalistHeight) {
              $datalist.stop().animate({
                scrollTop: scrollValue += datalistItemsHeight
              }, 200);
            }
          } else {
            datalistItems.removeClass("active");
            $datalist.find("li:visible:first").addClass("active");
          }
        }

        // return or tab key
        if (e.keyCode == 13 || e.keyCode == 9) {
          if (active.length) {
            $input.val(active.text());
            item_selected(active.text());
          }
          $datalist.fadeOut(options.fadeOutSpeed);
          datalistItems.removeClass("active");
        }

        // keys
        if (e.keyCode != 13 && e.keyCode != 38 && e.keyCode != 40) {
          // Reset active class
          datalistItems.removeClass("active");
          $datalist.find("li:visible:first").addClass("active");

          // Reset scroll
          $datalist.scrollTop(0);
          scrollValue = 0;
        }

      });

      // When choosing from dropdown
      datalistItems.on("click", function() {
        var active = $("li.active");
        if (active.length) {
          $input.val($(this).text());
        }
        $datalist.fadeOut(options.fadeOutSpeed);
        datalistItems.removeClass("active");
        item_selected($(this).text());
      });

      function item_selected(new_text) {
        if (typeof options.change === 'function')
          options.change.call(this, new_text);
      }

    });
  };
})(jQuery); === === === === === === === === === === === === === === === === === === === ===


//$('input[type=text]').relevantDropdown();

$('input[type=text]').relevantDropdown({
  fadeOutSpeed: 0
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<HTML>

<HEAD>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

  <style>
    p {
      margin: 0 0 40px 0;
    }
    p:last-child {
      margin-bottom: 0;
    }
    .datalist {
      list-style: none;
      display: none;
      background: white;
      color: black;
      box-shadow: 0 2px 2px #999;
      position: absolute;
      left: 0;
      top: 0;
      max-height: 300px;
      overflow-y: auto;
    }
    .datalist:empty {
      display: none !important;
    }
    .datalist li {
      padding: 3px;
      font: 13px"Lucida Grande", Sans-Serif;
    }
    .datalist li.active {
      background: #3875d7;
      color: white;
    }
  </style>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js" type="text/javascript"></script>

  <script>
    if (!Modernizr.input.list) {
      alert('Your browser does not support HTML5 Datalist. We will now use Polyfill to add its support.');
    }

     // Safari reports success of list attribute, so doing ghetto detection instead
    yepnope({
      test: (!Modernizr.input.list),
      yep: [
        'js/jquery.relevant-dropdown.js',
        'js/load-fallbacks.js'
      ]
    });
  </script>

  <TITLE>EXO KnowlegeBase</TITLE>
  <STYLE>
    body,
    input {
      font-family: 'Open Sans', Calibri, Arial;
      margin: 0px;
      padding: 0px
    }
    a {
      color: #0254eb
    }
    a:visited {
      color: #0254eb
    }
    #header h2 {
      color: #fff;
      background-color: #3275a8;
      margin: 0px;
      padding: 5px;
      height: 40px;
      padding: 15px
    }
    html,
    body,
    #container {
      height: 100%
    }
    body>#container {
      height: auto;
      min-height: 100%
    }
    #footer {
      font-size: 12px;
      clear: both;
      position: relative;
      z-index: 10;
      height: 3em;
      margin-top: -3em;
      text-align: center
    }
    #content {
      padding-bottom: 3em;
      padding: 10px
    }
    input {
      font-size: 15px
    }
    .style1 {
      border: 3px solid #fa0;
      font-size: 20px
    }
    .style2 {
      border: 2px solid #af7;
      font-size: 18px
    }
  </STYLE>
</HEAD>

<BODY>

  <div id="container">
    <div id="header">
      <H2>
	<a href="#"><img border="0px" src="#" align="left"/></a>
	HTML5 Datalist Example
</H2>
    </div>
    <div id="content">

      <p>Exo KnolwledgeBase: <a href="#">Exchange Online</a>
      </p>

      <br/>Enter Country name:
      <input type="text" list="countries" name="mycountry" />

      <datalist id="countries">
        <select>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <select id="dynamic-select">
            <option value="Afghanisthan">Afghanistan</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="Andorra">Andorra</option>
            <option value="Angola">Angola</option>
            <option value="Antigua &amp; Deps">Antigua &amp; Deps</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="United States">United States</option>
            <option value="Uruguay">Uruguay</option>
            <option value="Uzbekistan">Uzbekistan</option>
            <option value="Vanuatu">Vanuatu</option>
            <option value="Vatican City">Vatican City</option>
            <option value="Venezuela">Venezuela</option>
            <option value="Vietnam">Vietnam</option>
            <option value="Yemen">Yemen</option>
            <option value="Zambia">Zambia</option>
            <option value="Zimbabwe">Zimbabwe</option>
          </select>
      </datalist>


</BODY>

</HTML>
＆＃13;
＆＃13;
＆＃13;

我有2个Jquery和一个帮助我分配自动更正提取值的html。丢失的地方是我不能让搜索框中填入的选定值打开Href网页。

.js个文件包含这些内容

首先.Js： - 

(function($) {

  // Make jQuery's :contains case insensitive (like HTML5 datalist)
  // Changed the name to prevent overriding original functionality
  $.expr[":"].RD_contains = $.expr.createPseudo(function(arg) {
      return function( elem ) {
          return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
      };
  });

  $.fn.relevantDropdown = function(options) {

    options = $.extend({
      fadeOutSpeed: 'normal', // speed to fade out the dataList Popup
      change: null
    }, options);

    return this.each(function() {

      var $input = $(this),
          list_id = $input.attr('list'),
          $datalist = $("#" + list_id),
          datalistItems = $datalist.find("option"),

          searchPosition,
          scrollValue = 0,

          // Used to prevent reflow
          temp_items = document.createDocumentFragment(),
          temp_item = null;

      // Insert home for new fake datalist
      $("<ul />", {
        "class": "datalist",
        "id"   : list_id
      }).appendTo("body");

      // Remove old datalist
      $datalist.remove();

      // Update pointer
      $datalist = $("#" + list_id);

      // Fill new fake datalist
      datalistItems.each(function() {
        temp_item = $("<li />", {
                // .val is required here, not .text or .html
                // HTML *needs* to be <option value="xxx"> not <option>xxx</option>  (IE)
          "text": $(this).val()
        })[0];
        temp_items.appendChild(temp_item);
      });
      $datalist.append(temp_items);

      // Update pointer
      datalistItems = $datalist.find("li");

      // Typey type type
      $input
        .on("focus", function() {
          // Reset scroll
          $datalist.scrollTop(0);
          scrollValue = 0;
        })
        .on("blur", function() {
          // If this fires immediately, it prevents click-to-select from working
          setTimeout(function() {
            $datalist.fadeOut(options.fadeOutSpeed);
            datalistItems.removeClass("active");
          }, 500);
        })
        .on("keyup focus", function(e) {
          searchPosition = $input.position();
          // Build datalist
          $datalist
            .show()
            .css({
              top: searchPosition.top + $(this).outerHeight(),
              left: searchPosition.left,
              width: $input.outerWidth()
            });

          datalistItems.hide();
          $datalist.find("li:RD_contains('" + $input.val() + "')").show();
        });

      // Don't want to use :hover in CSS so doing this instead
      // really helps with arrow key navigation
      datalistItems
        .on("mouseenter", function() {
          $(this).addClass("active").siblings().removeClass("active");
        })
        .on("mouseleave", function() {
          $(this).removeClass("active");
        });

      // Window resize
      $(window).resize(function() {
        searchPosition = $input.position();
        $datalist
          .css({
            top: searchPosition.top + $(this).outerHeight(),
            left: searchPosition.left,
            width: $input.outerWidth()
          });
      });

      // Watch arrow keys for up and down
      $input.on("keydown", function(e) {

        var active = $datalist.find("li.active"),
            datalistHeight = $datalist.outerHeight(),
            datalistItemsHeight = datalistItems.outerHeight();

        // up arrow
        if ( e.keyCode == 38 ) {
          if (active.length) {
            prevAll = active.prevAll("li:visible");
            if (prevAll.length > 0) {
              active.removeClass("active");
              prevAll.eq(0).addClass("active");
            }

            if ( prevAll.length && prevAll.position().top < 0 && scrollValue > 0 ){
              $datalist.scrollTop(scrollValue-=datalistItemsHeight);
            }
          }
        }

        // down arrow
        if ( e.keyCode == 40 ) {
          if (active.length) {
            var nextAll = active.nextAll("li:visible");
            if (nextAll.length > 0) {
              active.removeClass("active");
              nextAll.eq(0).addClass("active");
            }

            if ( nextAll.length && (nextAll.position().top + datalistItemsHeight) >= datalistHeight ){
              $datalist.stop().animate({
                scrollTop: scrollValue += datalistItemsHeight
              }, 200);
            }
          } else {
            datalistItems.removeClass("active");
            $datalist.find("li:visible:first").addClass("active");
          }
        }

        // return or tab key
        if ( e.keyCode == 13 || e.keyCode == 9 ){
          if (active.length) {
            $input.val(active.text());
            item_selected(active.text());
          }
          $datalist.fadeOut(options.fadeOutSpeed);
          datalistItems.removeClass("active");
        }

        // keys
        if ( e.keyCode != 13 && e.keyCode != 38 && e.keyCode != 40 ){
          // Reset active class
          datalistItems.removeClass("active");
          $datalist.find("li:visible:first").addClass("active");

          // Reset scroll
          $datalist.scrollTop(0);
          scrollValue = 0;
        }

      });

      // When choosing from dropdown
      datalistItems.on("click", function() {
        var active = $("li.active");
        if (active.length) {
          $input.val($(this).text());
        }
        $datalist.fadeOut(options.fadeOutSpeed);
        datalistItems.removeClass("active");
        item_selected($(this).text());
      });

      function item_selected(new_text) {
        if( typeof options.change === 'function' )
          options.change.call(this, new_text);
      }

    });
  };
})(jQuery);

第二个.js如下： - 

//$('input[type=text]').relevantDropdown();

$('input[type=text]').relevantDropdown({
  fadeOutSpeed: 0
});

HTML如下： - 

<HTML>
<HEAD>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<style>
p {
    margin: 0 0 40px 0;
}
p:last-child {
    margin-bottom: 0;
}
.datalist {
    list-style: none;
    display: none;
    background: white;
    color: black;
    box-shadow: 0 2px 2px #999;
    position: absolute;
    left: 0;
    top: 0;
    max-height: 300px;
    overflow-y: auto;
}
.datalist:empty {
    display: none !important;
}
.datalist li {
    padding: 3px;
    font: 13px "Lucida Grande", Sans-Serif;
}
.datalist li.active {
    background: #3875d7;
    color: white;
}
</style>

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js" type="text/javascript"></script>

<script>

if(!Modernizr.input.list) {
    alert('Your browser does not support HTML5 Datalist. We will now use Polyfill to add its support.');
}

// Safari reports success of list attribute, so doing ghetto detection instead
yepnope({
  test : (!Modernizr.input.list),
  yep : [
      'js/jquery.relevant-dropdown.js',
      'js/load-fallbacks.js'
  ]
});
</script>

    <TITLE>EXO KnowlegeBase</TITLE>
<STYLE>body,input{font-family:'Open Sans',Calibri,Arial;margin:0px;padding:0px}a{color:#0254eb}a:visited{color:#0254eb}#header h2{color:#fff;background-color:#3275a8;margin:0px;padding:5px;height:40px;padding:15px}html,body,#container{height:100%}body>#container{height:auto;min-height:100%}#footer{font-size:12px;clear:both;position:relative;z-index:10;height:3em;margin-top:-3em;text-align:center}#content{padding-bottom:3em;padding:10px}input{font-size:15px}.style1{border:3px solid #fa0;font-size:20px}.style2{border:2px solid #af7;font-size:18px}</STYLE>
</HEAD>
<BODY>

<div id="container">
<div id="header">
<H2>
    <a href="#"><img border="0px" src="#" align="left"/></a>
    HTML5 Datalist Example
</H2>
</div>
<div id="content">

<p>Exo KnolwledgeBase: <a href="#">Exchange Online</a></p>

<br/>
Enter Country name:
<input type="text" list="countries" name="mycountry" />

<datalist id="countries">
    <select>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <select id="dynamic-select">
        <option value="Afghanisthan">Afghanistan</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
        <option value="Andorra">Andorra</option>
        <option value="Angola">Angola</option>
        <option value="Antigua &amp; Deps">Antigua &amp; Deps</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="United States">United States</option>
        <option value="Uruguay">Uruguay</option>
        <option value="Uzbekistan">Uzbekistan</option>
        <option value="Vanuatu">Vanuatu</option>
        <option value="Vatican City">Vatican City</option>
        <option value="Venezuela">Venezuela</option>
        <option value="Vietnam">Vietnam</option>
        <option value="Yemen">Yemen</option>
        <option value="Zambia">Zambia</option>
        <option value="Zimbabwe">Zimbabwe</option>
    </select>
</datalist>


</BODY>
</HTML>

我知道我在这里遗漏了一些东西，但不确定是什么。提前谢谢！

0 个答案:

没有答案
相关问题
最新问题