jsonsuggest是一个不错的js插件，可以实现模糊联想查询，效果如图,

客户体验还是不错，不过我也是弄了一两天，基于我同事修改过的源码之上，我还修改了源码

(function($) {
 $.fn.jsonSuggest = function(searchData, settings) {
  var defaults = {
   minCharacters : 1,
   maxResults : undefined,
   wildCard : "",
   caseSensitive : false,
   notCharacter : "!",
   maxHeight : 350,
   highlightMatches : true,
   onSelect : undefined,
   ajaxResults : false,
   key : "id",
   value : "name",
   textId : ""
  };
  settings = $.extend(defaults, settings);
  return this.each(function() {
   function regexEscape(txt, omit) {
    var specials = ['/', '.', '*', '+', '?', '|', '(', ')', '[',
      ']', '{', '}', '\\'];
    if (omit) {
     for (var i = 0; i < specials.length; i++) {
      if (specials[i] === omit) {
       specials.splice(i, 1);
      }
     }
    }
    var escapePatt = new RegExp('(\\' + specials.join('|\\') + ')',
      'g');
    return txt.replace(escapePatt, '\\$1');
   }
   var obj = $(this), wildCardPatt = new RegExp(
     regexEscape(settings.wildCard || ''), 'g'), results = $('<div />'), currentSelection, pageX, pageY;
   function selectResultItem(item) {
    $(results).html('').hide();
    var tId = settings.textId;
    $('#' + tId).val(item.name);
    if (typeof settings.onSelect === 'function') {
     settings.onSelect(item, settings.textId);
    }
   }
   function setHoverClass(el) {
    $('div.resultItem', results).removeClass('hover');
    $(el).addClass('hover');
    currentSelection = el;
   }

   function buildResults(resultObjects, sFilterTxt) {
    var v1 = settings.key;
    var v2 = settings.value;
    sFilterTxt = "(" + sFilterTxt + ")";
    var bOddRow = true, i, iFound = 0, filterPatt = settings.caseSensitive
      ? new RegExp(sFilterTxt, "g")
      : new RegExp(sFilterTxt, "ig");
    $(results).html('').hide();
    for (i = 0; i < resultObjects.length; i += 1) {
     var item = $('<div />'), text = resultObjects[i][v1];
     // 楂樹寒鏄剧ず 杈撳叆鐨勫瓧绗?
     // if (settings.highlightMatches === true) {
     // text = text.replace(filterPatt,
     // "<strong>$1</strong>");
     // }
     $(item).append('<p class="text">' + text + ':'
       + resultObjects[i][v2]);
     $(item).append('</p>');
     if (typeof resultObjects[i].image === 'string') {
      $(item).prepend('<img src="' + resultObjects[i].image
          + '" />')
        .append('<br style="clear:both;" />');
     }
     $(item).addClass('resultItem').addClass((bOddRow)
         ? 'odd'
         : 'even').click(function(n) {
        return function() {
         selectResultItem(resultObjects[n]);
        };
       }(i)).mouseover(function(el) {
        return function() {
         setHoverClass(el);
        };
       }(item));
     $(results).append(item);
     bOddRow = !bOddRow;
     iFound += 1;
     if (typeof settings.maxResults === 'number'
       && iFound >= settings.maxResults) {
      break;
     }
    }
    if ($('div', results).length > 0) {
     currentSelection = undefined;
     $(results).show().css('height', 'auto');
     if ($(results).height() > settings.maxHeight) {
      $(results).css({
         'overflow' : 'auto',
         'height' : settings.maxHeight + 'px'
        });
     }
    }
   }
   function checkStr(str) {
    var iu, iuu, regArray = new Array("", "◎", "■", "●", "№", "↑",
      "→", "↓" + "!", "@", "#", "$", "%", "^", "&", "*", "(",
      ")", "_", "-", "+", "=", "|", "'", "[", "]", "？", "~",
      "`" + "!", "<", ">", "‰", "→", "←", "↑", "↓", "¤", "§",
      "＃", "＆", "＆", "＼", "≡", "≠" + "≈", "∈", "∪", "∏", "∑",
      "∧", "∨", "⊥", "∥", "∥", "∠", "⊙", "≌", "≌", "√", "∝",
      "∞", "∮" + "∫", "≯", "≮", "＞", "≥", "≤", "≠", "±", "＋",
      "÷", "×", "／", "Ⅱ", "Ⅰ", "Ⅲ", "Ⅳ", "Ⅴ", "Ⅵ", "Ⅶ", "Ⅷ",
      "Ⅹ", "Ⅻ", "㈠", "㈡" + "╄", "╅", "╇", "