Loading ...
Sorry, an error occurred while loading the content.
 

Autocomplete field, how to make it accept s value not in the list

Expand Messages
  • scott_shaver2000
    I m trying to use the autocomplete funcitonality to help users spell city names. I need them to be able to enter a value that isn t in the list. Below is the
    Message 1 of 1 , Aug 28, 2008
      I'm trying to use the autocomplete funcitonality to help users spell
      city names. I need them to be able to enter a value that isn't in
      the list. Below is the simple html page and the php datasource I'm
      using. The field will not take a value not in the data list unless I
      click outside of the field with the mouse. Using enter and tab always
      causes some value in the list to be selected.

      I'd also like the value list to disappear when the user hits the
      enter key as that seems like the natural behavior to me. I'm not a
      javascript person so I'm totally lost.


      HTML ---------------------------------------------
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
      Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
      <head>
      <title>YUI autocomplete Test</title>
      <link type="text/css" rel="stylesheet"
      href="http://yui.yahooapis.com/2.5.2/build/autocomplete/assets/skins/s
      am/autocomplete.css">
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-
      event.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/get/get-min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/connection/connection-
      min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/animation/animation-
      min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/json/json-
      min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/autocomplete/autocomplete-
      min.js"></script>

      <style type="text/css">
      /* custom styles for multiple stacked instances with custom
      formatting */
      #example0 { z-index:9001; } /* z-index needed on top instances for ie
      & sf absolute inside relative issue */
      #example1 { z-index:9000; } /* z-index needed on top instances for ie
      & sf absolute inside relative issue */
      .autocomplete { padding-bottom:2em;width:20%; }/* set width of widget
      here*/
      .autocomplete .yui-ac-highlight .sample-quantity,
      .autocomplete .yui-ac-highlight .sample-result,
      .autocomplete .yui-ac-highlight .sample-query { color:#FFF; }
      .autocomplete .sample-quantity { float:right; } /* push right */
      .autocomplete .sample-result { color:#A4A4A4; }
      .autocomplete .sample-query { color:#000; }
      </style>


      <script type="text/javascript">
      // Define a custom formatter function
      var fnCustomFormatter = function(oResultItem, sQuery) {
      var sKey = oResultItem[0];
      var nQuantity = oResultItem[1];
      var sKeyQuery = sKey.substr(0, sQuery.length);
      var sKeyRemainder = sKey.substr(sQuery.length);
      var aMarkup = ["<div class='sample-result'><div class='sample-
      quantity'>",
      nQuantity,
      "</div><span class='sample-query'>",
      sKeyQuery,
      "</span>",
      sKeyRemainder,
      "</div>"];
      return (aMarkup.join(""));
      };

      // Instantiate one XHR DataSource and define schema as an array:
      // ["Record Delimiter", "Field Delimiter"]
      var myDataSource = new YAHOO.widget.DS_XHR("yuiac_ds.php",
      ["\n", "\t"]);
      myDataSource.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
      myDataSource.maxCacheEntries = 60;
      myDataSource.queryMatchSubset = true;
      </script>

      </head>
      <body class="yui-skin-sam">

      <div id="example0" class="autocomplete">
      <input id="ysearchinput0" type="text">
      <div id="ysearchcontainer0"></div>
      </div>
      <script type="text/javascript">
      var myInput = document.getElementById
      ('ysearchinput0');
      var myContainer = document.getElementById
      ('ysearchcontainer0');
      var myAutoComp = new YAHOO.widget.AutoComplete
      (myInput, myContainer, myDataSource);
      myAutoComp.queryDelay = 0;
      myAutoComp.useIFrame = true;
      myAutoComp.forceSelection = false;
      myAutoComp.prehighlightClassName = "yui-ac-
      prehighlight";
      myAutoComp.formatResult = fnCustomFormatter;
      </script>

      </body>
      </html>

      PHP datasource -----------------------------------

      aasgfasdg
      bsadfgadf
      cadfhdsg
      druj3rw
      ewru
      fey
      gghmd
      hghmdgm
    Your message has been successfully submitted and would be delivered to recipients shortly.