2012-04-05 12 views
2

私はselect要素に異なるタイトルを含んでいます。選択の中で最も近い一致

<select name="titles"> 
    <option value="1">Mr.</option> 
    <option value="2">Mrs.</option> 
    <option value="3">Ms.</option> 
    <option value="4">Dr.</option> 
    [..] 
</select> 

次に、ユーザーが提出したタイトル(元々はフリーフォームのテキストボックスで書かれています)を含む文字列があります。私の仕事は、そのタイトルに対応するselectoptionを選択することです。

しかし、ユーザーが愚かになることがあります。

私が検索したユーザー提供の文字列は "dr"です。または "Dr"かそのようなもの。最も関連性の高いもの(「Mr.」ではなく「Dr.」)と一致させる必要があります。両方とも「Dr。」と近いです。

どうすればいいですか?私はこれまで、MySQLのLIKEとPHPのlevenshtein()とのマッチングを行ってきましたが、どちらも私の理解には関係がありません。

jQuery 1.7.1が利用可能です。 IE6との互換性は私には関係ありません。

ありがとうございます!

+0

オートコンプリート機能が欲しいですか? – Ved

+0

いいえ、データベースソースから文字列を取得しました。ページがロードされた後に、選択したオプションを変更する方法が必要です。 –

答えて

2

私が間違っていない場合、妥当な(そして受け入れられる)唯一のバリエーションは、最初は大文字/大文字で、最後には欠落した文字です。

そのような場合、あなたは単に心の中で上記とselectの各項目に、ユーザの文字列を比較することができます:

  • 大文字にユーザー入力の最初の文字を変換します。
  • ユーザー文字列が.で終わらない場合は、文字列の最後に.を追加します。
  • 変更されたユーザーの文字列とselectの各要素を比較し、一致するものがあるかどうかを確認します。
+0

これは明らかに私が挙げた例ではうまくいくでしょう(と私にはそれほど単純ではないことが恥ずかしいですが)、 "Lt.Cmdr"、 "LCpl"のような奇妙な敬意を払い、 "MEP"これら(および他のもの)には、より多くの代替スペルがあります。 –

+2

このような例(Lt.Cmdrなど)の場合、各オプションの各バリエーションを ''のようなものです。 –

2

ユーザーは愚かなことはありません。あなたは、私が最初に私のJavaScriptでlowecaseに私のすべての文字を変換するだろうマッチングを行う前に)

、それから私は(ドットを探します)とmabyeそれらを削除しますか。それらをmatch-string(あなたのchoise)に追加してください。

1

希望に役立ちます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <!-- Date: 2012-04-05 --> 
    <script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     var title = "dr" 
     $("#titles option").each(function(i, el) { 
      var re = new RegExp(title, 'ig') 
      if ($(el).html().match(re)) { 
       $(el).attr("selected", "selected"); 
      } 
     }); 
    }) 
    </script> 
</head> 
<body> 
    <select name="titles" id="titles"> 
     <option value="1">Mr.</option> 
     <option value="2">Mrs.</option> 
     <option value="3">Ms.</option> 
     <option value="4">Dr.</option> 
    </select> 
</body> 
</html> 

そして、あなたの問題に対する別の解決策 - 彼らは間違ったデータを入力する機会を持っていませんので、ユーザーまさにこのフォームを与えます。

+0

それ以外の点では良いですが、 "Cmdr"に 'selected'を追加しました。と "Lt.Cmdr。"と一致するため、 "Dr."と一致します。そのための修正? –

+0

ええ、regexpを次のように置き換えてください: 'var re = new RegExp("^"+ title +"。* $ "、 'i')' – deadrunk

+0

ありがとう!しかし、その中に期間がないタイトルでも問題に遭うことはありませんか? "MEP"、 "Sir"、 "DA"などのように? –

0

フリーフォーム文字列をリスト項目に一致させる余分なレイヤーを削除することを検討しますか?おそらくオートコンプリートフィールド/ドロップダウンなどがあります。ユーザーに同じデータを2回入力して再選択させることは過度に思われます。

私はファジー検索アルゴリズムを検討することを提案しましたが、特定のタイトルに一致する値の配列を持つ方が簡単ではないでしょうか?これは、正規化された期間、大文字と白の空白、つまり

  • ユーザ入力dr.DrDr.が正規化されると照合Dr.
  • ユーザ入力doctorDoctorは正規化であろうと一致
  • ユーザ入力、docDoc.docは正規化され、そして一致したものなど

これは、しかし、姉妹などのバリエーションを介して行く本当に最初に正規化されたドロップダウンにすることを検討;これよりも処理するのが難しい唯一のものは、正規化されていないアドレスフィールドです。

+1

非常に合意しました。残念ながら、私はオリジナルの入力を制御できません(ユーザが作成したタイトルは別の場所で収集され、データベースに保存されてから、長いフォームに記入する作業負荷を軽減するためにユーザーが自動的に選択しようとします) –

+0

残念ながら、エンドユーザーが記入しやすいようにフォームを作る努力のために間違いなく賞賛しています!また、これはタイトルマッチングだけのための過度の可能性がありますが、ここで私が話していたファジー検索ページへのリンクです:http://code.google.com/p/yeti-witch/アルゴリズム最終的には、コードで助けてくれるかもしれません:) –

+0

私は小さな細部のために過剰なコードに全く問題はありません。コードの80%が機能の20%を占めています。 :) - リンクをありがとう、私はそれをチェックします! –

関連する問題